基于Vue移动音乐web app跨域获取QQ音乐歌单接口教程

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

我的vue版本是2.5.2，用vue-cli脚手架工具搭出来的项目结构是：

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

其中最需要注意的点是headers里的referer，需要设置成跟QQ音乐的请求参数一样，否则请求该接口服务端不会响应，因为前端是不能够强行修改referer的，所以需要去设置一个后台代理，这是老师的那个vue-cli版本搭出来的项目结构的方法，他的项目结构里有一个dev.server.js。

他在dev.server.js里用express框架搭了一个服务器，设置一个接口，然后让前端去请求这个接口，在这个接口里再去请求QQ音乐的歌单接口并且设置相应的头文件信息如referer等，这样就达到了目的。

由于我的vue-cli搭出来的项目结构跟老师的不一样，没有按照老师的方法去请求，但是在config文件夹下的index.js里提供了一个proxyTable属性，可以在这里进行跨域请求。

在这里配置一个接口名，对应的值是一个对象，target属性是真实请求的值，bypass对应的函数是请求之前可以进行的操作，req这个参数就是请求的信息，可以在这里设置请求头信息，然后通过pathRewrite设置一下前缀，最后在前端请求的接口写成设置的接口名就能进行请求了。

记得把参数的format传成json，这样返回的值就会是json数据了，方便进行操作。

如果你觉得我的文章有帮助，请支持我吧