vue-music使用后端代理请求歌单数据接口详解

在获取歌单数据的时候，我们发现用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进行渲染。