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

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 = http://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 = Objecthttp://.assign({}, commonParams, {

// 以下参数自行参考源json文件的Query String Parameters

platform: 'yqq',

uin: 0,

needNewCode: 0,

hostUin: 0,

sin: 0,

ein: 29,

shttp://ortId: 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对象

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。