Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

点击排行

您现在的位置:首页 > 技术文档 > js框架/js库

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

来源:中文源码网    浏览:186 次    日期:2024-03-27 07:23:25
【下载文档:  vue + webpack如何绕过QQ音乐接口对host的验证详解.txt 】


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 = 'http://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 = 'http://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'http://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 = 'http://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对象
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对中文源码网的支持。

相关内容