Vue开发音乐移动端实战(2) —获取QQ热门歌单数据

有些网站请求jsonp不一定都可行，就像QQ热门歌单的请求链接一样，在请求头有Host：c.y.qq.com也就是一个qq的域名，Referer：表示请求的来源，所以说十有八九请求的接口是这样一个host和referer。

其中host和referer是从纯前端的角度是没有办法去绕过他的

前端无法直接去修改Request Header的，所以可以通过后端代理的方式去解决！

在Vue项目中会启动一个server服务，其实就是node server，

所以需要在webpack.dev.conf.js文件下添加如下代码

去创建一个router

const express = require('express')   //引入express框架模块
var axios = require('axsio')            //引入axios模块
var app = express()                    //实例化express
var apiRoutes= express.Router()            //设置路由
app.use('api',apiRoutes)            //将路由地址PI注册路由

在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, {
                    headers: {
                        referer: 'https://c.y.qq.com/',
                        host: 'c.y.qq.com'                //访问的域名
                    },
                    params: req.query                //req.query我打印过是url的data参数
                }).then((response) => {

                    res.json(response.data)            //发送一个JSON响应

                }).catch((e) => {
                    console.log(e)
                })
            })
        }

然后将其recommend.js中的getDiscList函数修改一下

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)
    })
}

最后利用flex布局DOM，v-for写出渲染

继续努力