最近做一個項目 一個用vue 開發一個 Music-WebApp，因為 不是后台模擬數據 所以用的數據都是線上的。
所以去調用的接口，封裝了一個 jsonp 代碼如下
這里我調用的是qq音樂的一個接口
所有的的參數 都和qq音樂那邊的保持一致。
當我 console.log所抓取數據時，查看控制台時發現了以下錯誤
2.錯誤分析
當我在瀏覽器打開我想要的接口的時候，發現無法查看數據
出現這種情況 說明 qq音樂設置Referer使我們不能直接通過瀏覽器抓接口。
因此我們要對Referer做一些改變
3.了解跨域資源共享（Cross-Origin-Resource-Sharing）
跨域資源共享（CORS）機制，是為了瀏覽器能更為安全的處理跨域請求，使其不受同源策略的限制。簡單來說就是把需要允許跨域的源寫入response頭里的Access-Control-Allow-Origin。對應的源就可以實現跨域資源共享了。
說到同源策略，不得不提到另外一個概念——源（Origin）。那什么是源的呢？源其實是是個域名（domain），一般請求網頁的那個url的域名就會被制定為源——如此看來同源策略就能很容易理解了，就是限制Javascript的Ajax請求與源不相同的url。
4.解決方法
這里 我寫了一個后端代理接口來解決這個問題
我們進入到vue.config.js配置文件
首先要引入erpress這個包
注意vue 3.0 不會自帶 express 要自己 npm。
同時我們還要npm 一個 axios 這個相信大家都聽說過
axios 基於promise用於瀏覽器和node.js的http客戶端
然后開始寫我的代理接口
我們在這里引入qq音樂的接口地址,axios的具體使用方法在這里就不詳細說明了百度自己搜索吧。
然后在我們自己引用的就是自己寫的
因為qq音樂設置 Referer 不能直接通過瀏覽器抓接口，但是防不了我們這種后端代理的方式
配置完之后我們打開控制台查看 這里顯示Referer我們自己的，而實際上已經修改成立qq音樂的Referer
這樣就相當於欺騙了qq音樂，它就會認為是自己那邊發出來的請求。
這時我們在console.log
發現已經可以拿到數據了。
4.注意事項
不要使用過多的接口 當你的數據訪問量過大 你的ip很可能被封禁