最近看了一個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數據了，方便進行操作。
原文地址：https://www.2cto.com/kf/201712/704822.html?utm_source=oschina-app