在获取歌单数据的时候,我们发现用jsonp获取接口的时候会报错,这是为什么呢?
原因是qq音乐在请求头里面加了authority和refer等 ,如果我们通过jsonp实现跨域来请求数据的话 是根本不能够修改请求头的 ,如果要使用axios直接进行跨域访问是不可以的,这时候我们可以进行后端接口代理 ,客户端请求服务端的数据是存在跨域问题的,而服务器和服务器之间可以相互请求数据,是没有跨域的概念(如果服务器没有设置禁止跨域的权限问题),也就是说,我们可以配置一个代理的服务器可以请求另一个服务器中的数据,然后把请求出来的数据返回到我们的代理服务器中,代理服务器再返回数据给我们的客户端,这样我们就可以实现跨域访问数据啦。
1. 接下来手动代理后端服务器,不过视频中的版本默认vue项目build文件夹里面没有dev-server.js,因此我们在build文件夹webpack.dev.conf.js搭建服务器
const express = require('express')
const app = express()
const apiRoutes = express.Router() //后端路由
app.use('/api', apiRoutes)
在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.安装axios
cnpm install axios --save
3.修改前端的请求方式为ajax并且导入axios,在recommend.js
export function getDiscList() {
const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 19,
needNewCode: 0,
categoryId: 10000000,
sortId: 5,
rnd:Math.random(),
format:'json'
})
return axios.get(url,{
params:data
}).then((res)=>{
return Promise.resolve(res.data)
})
}
4.打印获取的数据
_getDiscList(){
getDiscList().then((res)=>{
if (res.code === ERR_OK) {
console.log(res.data.list)
}
})
}
好了,这样就获取到歌单数据了,接下来可以对dom进行渲染。