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

二、后端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()

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对象

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