vue + webpack如何绕过QQ音乐接口对host的验证详解

2019-11-19 13:35:05

字体：大中小

来源：转载

供稿：网友

前言

最近在使用vue2.5+webpack3.6撸一个移动端音乐项目, 获取全部歌单json数据时遇到了接口对host和referer的限制，故不能直接在前端使用jsonp对接口数据的读取。

一、先实现使用jsonp读取的方式安装jsonp模块并，封装请求方法

1. $ npm install -S jsonp

2. 封装import originJSONP from 'jsonp'

function jsonp(url, data, options) { // 如果存在?则直接加params(data), 否则先加?再加 params(data) url += (url.indexOf('?') < 0 ? '?' : '') + params(data) // 结果返回一个Promise对象 return new Promise((resolve, reject) => { originJSONP(url, options, (err, data) => {  if (!err) {  resolve(data)  } else {  reject(err)  } }) })}function params(data) { let params = '' for (var k in data) { let value = data[k] != undefined ? data[k] : '' // url += '&' + k + '=' + encodeURIComponent(value) ES5 params += `&${k}=${encodeURIComponent(value)}` // ES6 } // 去掉首个参数的&, 因为jsonp方法中参数自带& return params ? params.substring(1) : ''}

3. 请求数据

# 代码 const commonParams = { g_tk: 5381, inCharset: 'utf-8', outCharset: 'utf-8', notice: 0, format: 'jsonp'}const options = { param: 'jsonpCallback'}getRecommend() { const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' const data = Object.assign({}, commonParams, { platform: 'h5', uin: 0, needNewCode: 1 }) return jsonp(url, data, options)}

4. 组件内调用getRecommend()方法, 获取数据

methods: { _getRecommend() { getRecommend().then((res) => {  // ERR_OK = 0是自定义的语义化参数, 对应返回json对象的code  if (res.code === ERR_OK) {  console.log(res.data)  const data = res.data  this.slider = data.slider  } }) }},created() { this._getRecommend()}

console.log(res.data)可打印出json数据

以上是使用jsonp的方式请求数据, 但对于被host和referer限制的json，需要绕过host验证，先让服务端请求接口，前端页面再通过服务端请求数据。而不能像jsonp那样直接前端请求json对象。报错如下

二、后端axios(ajax)请求接口数据

1. 定义后端代理请求 build/webpack.dev.config.js

const axios = require('axios')devServer: { before(app) { app.get('/api/getDiscList', function (req, res) {  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'  axios.get(url, {  headers: {   referer: 'https://c.y.qq.com/',   host: 'c.y.qq.com'  },  params: req.query  }).then((response) => {  res.json(response.data)  }).catch((e) => {  console.log(e)  }) }) }, # ...其他原来的代码}

2. 前端请求后端已获取的远程数据

import axios from 'axios'function getDiscList() { // const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg' const url = '/api/getDiscList' const data = Object.assign({}, commonParams, { // 以下参数自行参考源json文件的Query String Parameters platform: 'yqq', uin: 0, needNewCode: 0, hostUin: 0, sin: 0, ein: 29, sortId: 5, rnd: Math.random(), categoryId: 10000000, format: 'json' }) return axios.get(url, { params: data }).then((res) => { return Promise.resolve(res.data) })}

3. 组件内调用getDiscList()方法，可输出json数据

methods: { _getRecommend() { getRecommend().then((res) => {  if (res.code === ERR_OK) {  // console.log(res.data)  const data = res.data  this.slider = data.slider  } }) }, _getDiscList() { getDiscList().then((res) => {  console.log(res.data) }) }},created() { this._getRecommend() this._getDiscList()}

总结， vue+webpack项目中，如需请求获取远程json数据时，一般由两种情况:

1. 未受host和referer限制的前端组件可以直接使用jsonp插件请求json对象

2. 受host和referer限制需要验证的，通过后端代理方式，使用axios请求，前端再请求后端json对象

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对武林网的支持。

上一篇：jsonp跨域获取数据的基础教程

下一篇：关于Vue组件库开发详析