上一篇我们讲到,请求QQ音乐的推荐列表的轮播图数据,这些轮播图数据属于相对公开的数据,最多存在跨域问题,使用上篇说到的jsonp或者axios(在config的index.js函数中添加proxyTable进行请求代理)即可解决跨域问题。
这篇我们需要请求的时歌单列表,先看看请求回来的数据的格式
这个歌单列表数据的请求比较敏感,所以,QQ音乐对其API的请求做了限制,限制字段是referer和host,且需要带一堆公共参数
//QQ音乐歌单列表的url
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
//请求所需参数
data={
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode:0,
categoryId:10000000,
rnd:Math.random()
}
//请求需要配置header的字段
headers: {
referer: "https://c.y.qq.com/",
host: "c.y.qq.com"
}
qq音乐做了host和referer的校验,该请求是在qq音乐该页面下发送的才会成功,而config文件夹下index.js中的proxyTable只是用于解决跨域问题,但这次的不只是跨域问题,而是跨域+host以及referer的限制。如果只是跨域问题,那么jsonp和axios就足以解决。从纯前端的角度,我们是无法修改host和referer的,起码我知道的方法没有,那么我们应该如何改变host和referer?
由于浏览器的限制,不能直接在前端发起的请求中修改header中的referer、host、cookie等敏感字段。
所以我一度以为这个请求凉凉了,后来听说可以使用php,用php发起请求(后端发起请求不再受浏览器的同源策略的限制,且可以在请求中设置header),然后将请求回来的数据暴露出去,我们的axios就可以请求这个数据了。
但是由于我的php水平基本处于入门边缘,所以弄了大半天也没成功......
后来,在网上找到了好东西,devServer,即webpack启动的一个开发环境的服务器,我们可以在webpack.dev.conf.js文件中配置请求,由于在虚拟开发服务器里发送请求,效果与php是一样的,也可以忽略同源限制(即使用此方式,可以不使用jsonp或者proxyTable代理,因为我们都伪造referer和host这些请求头信息了,API接口会把这个请求当成是它允许的域名中发出的),然后根据配置文件中设置的请求路径,我们在前端中只需要axios发送个请求即可请求到服务器已请求回来的数据。
首先在webpack.dev.conf.js 中引入axios,因为devServe服务器要向QQ音乐API发送请求
然后在devServer中配置before函数,即在发起请求前改装伪造它的请求头
完整的webpack.dev.conf.js文件
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
//引入axios
const axios = require('../node_modules/axios')
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.dev.cssSourceMap,
usePostCSS: true
})
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
// these devServer options should be customized in /config/index.js
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ? {
warnings: false,
errors: true
} : false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
},
//配置跨域请求伪造referer
before(apiRoutes) {
apiRoutes.get('/QQMusicAPI/songList', 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)
})
})
},
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}])
],
})
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors ?
utils.createNotifierCallback() : undefined
}))
resolve(devWebpackConfig)
}
})
})
然后创建songList函数发起对服务器请求回来的文件的二次请求
import axios from 'axios';
let commonParams = {}
export function getDiscList() {
const url = '/QQMusicAPI/songList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
console.log(res.data);
return Promise.resolve(res.data)
})
}
然后在前端组件中引入该请求函数,在created函数中调用即可
其中,如果想要在组件中保存异步请求回来的值,需要使用async和await,否则保存的只是一个异步的Promise对象
最后,如果你看你返回的数据是中文乱码,则在axios请求的时候带上参数,设定编码格式为utf-8即可。
参考文章:
VUE中使用反向代理模拟http请求中host和referer
如何改变请求的host以及referer抓取做了host以及referer限制的接口数据