基于Vue移动音乐webapp跨域获取QQ音乐歌单接口

image.png

最近看了一个vue移动音乐webapp教程，老师是一个来自滴滴公司的名为黄轶的前端大神，之前学习了他的一个基于vue仿饿了么webapp的初级教程，感觉非常好，十分适合新手，但是那个教程的数据都是前端模拟的一个data.json的json文件，这一次的教程的数据全都是来自QQ音乐的真实数据，需要请求它的接口，因为是线上的数据，所以许多接口需要进行跨域或者设置一些头部信息。
我的vue版本是2.5.2，用vue-cli脚手架工具搭出来的项目结构是：

image.png

说一下接口，QQ音乐歌单接口以及参数如下：

image.png

新版本

然而： 现在目录结构改变后，原来的方法已经不能使用，找到一个好的解决方法：
使用ProxyTable反向代理：在这个index.js文件里面找到ProxyTable配置

image.png

image.png

index.js 配置如下：

proxyTable: {
      '/api/getDiscList': {
        target: 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg',
        bypass: function (req, res, proxyOptions) {
          req.headers.referer = 'https://c.y.qq.com';
          req.headers.host = 'c.y.qq.com';
        },
        pathRewrite: {
          '^/api/getDiscList': ''
        }
      }
    },
//注意上面的写法

回到文件： api/recommendj.s

image.png

import jsonp from '../common/js/jsonp'
import {commonParams, options} from './config'
import axios from 'axios'

export function getRecommend() {
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
  const data = Object.assign({}, commonParams, {
    uin: 0,
    platform: 'h5',
    needNewCode: 1
  })
  return jsonp(url, data, options)
}

// ajax请求,不是jsonp请求了
export function getDiscList() {
  const url = '/api/getDiscList'
  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) => {
    return Promise.resolve(res.data)
  })
}

这样就可以实现，结果如下：

image.png

也能拿到列表数据了：

image.png

参考网站：
https://www.bzqll.com/ (推荐 最新最全的 QQ 酷狗 网易云 音乐API地址 )
https://www.cnblogs.com/shengnan-2017/p/9104079.html （此文有注释代码 ）
https://segmentfault.com/a/1190000013073545

https://api.bzqll.com/music/tencent/song?key=579621905&id=001fXNWa3t8EQQ&isOrigin=1