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

前言

最近在使用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对象

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