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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。