vue2.x 通过后端接口代理,获取qq音乐api的数据示例
前言:部分qq音乐的api接口不能直接通过jsonp访问,需要通过官方的代理才能获取,如:歌词,推荐歌单等
1.webpack.dev.conf.js中创建接口:
//开头调用:
varexpress=require('express')
varaxios=require('axios')
varapp=express()
varapiRoutes=express.Router()
app.use('/api',apiRoutes)
//devServer的最后添加:
before(app){
app.get('/api/getDiscList',function(req,res){
varurl='https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'//原api
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.api的js文件中,将url换成步骤1中自定义的接口,通过axios获取返回数据
importjsonpfrom'common/js/jsonp'
import{commonParams,options}from'./config'
importaxiosfrom'axios'
exportfunctiongetDiscList(){
consturl='/api/getDiscList'
constdata=Object.assign({},commonParams,{
platform:'yqq',//加引号
hostUin:0,
sin:0,
ein:29,
sortId:5,
needNewCode:0,
categoryId:10000000,
rnd:Math.random(),
format:'json'
})
returnaxios.get(url,{
params:data
}).then((res)=>{
returnPromise.resolve(res.data)
})
}
3.组件中通过api的js文件中的方法获取数据
import{getDiscList}from'api/recommend'
_getDiscList(){
getDiscList().then((res)=>{
if(res.code===ERR_OK){
console.log('推荐:',res)
this.discList=res.data.list
}else{
console.log('没,没有推荐')
}
})
}
以上这篇vue2.x通过后端接口代理,获取qq音乐api的数据示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。