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

前言

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

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

1. $ npm install -S jsonp

2.封装import originjsONP from 'jsonp'

rush:js;"> 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.请求数据

rush:js;"> # 代码 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,options)
}

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

{ // 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

{ res.json(response.data) }).catch((e) => { console.log(e) }) }) },# ...其他原来的代码 }

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

{ return Promise.resolve(res.data) }) }

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

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

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