Vue音乐播放器 -- 歌单数据获取

        歌单数据的请求头中有域名Host、来源Referer，所以请求的接口应该是有加上该域名和来源，直接请求就会报HTTP-500错误。是由于前端不能直接修改request header，所以要通过后端代理的方式解决。

采用 axios 在node.js中发送http请求

npm i axios

    定义路由，通过axios发送一个Http请求，同时修改header中的和QQ相关的Host、Referer，将浏览器传递过来的参数全部传给服务端，然后通json响应的内容输出到浏览器端。

1.  前端请求：

recommend.js：

        在前端recommend.js请求地址，不是直接请求服务端，而是请求我们自己的server端，然后我们的地址再去请求服务端（使用axios发送http请求）

import axios from 'axios'                //用于在node.js中发送http请求

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'        //json数据
  })

  return axios.get(url, { //返回值也不是jsonp，而是要通过axios实现
    params: data            //参数
  }).then((res) => {        //拿到数据（response对象）
    return Promise.resolve(res.data)
  })
}

2.   手动代理请求：

webpack.dev.conf.js：

var express = require('express')
var axios = require('axios')
var app = express()
var 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' // 服务端请求原api
        axios.get(url, {        //通过axios发送http请求，同时更改referer和host，并且把参数拓展给服务端
          headers: {             
            referer: 'https://c.y.qq.com/',        
            host: 'c.y.qq.com'
          },
          params: req.query    //浏览器请求该接口所带来的参数 
        }).then((response) => {    //成功回调
          res.json(response.data)    //response是QQ接口返回的，res是我们自己的。所以要把数据输出给浏览器前端
        }).catch((e) => {    //如果接口有问题，catch（）
          console.log(e)
        })
      })
    }

3.  组件中使用

recommend.vue：

import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'

export default {
  created() {
    this._getDiscList()
  },
  methods: {
       _getDiscList() {
      getDiscList().then((res) => {
        if (res.code === ERR_OK) {
          this.discList = res.data.list
          console.log(res.data.list)
        }
      })
    },
}