最近作一個項目 一個用vue 開發一個 Music-WebApp,由於 不是後臺模擬數據 因此用的數據都是線上的。 vue
因此去調用的接口,封裝了一個 jsonp 代碼以下node
這裏我調用的是qq音樂的一個接口ios
全部的的參數 都和qq音樂那邊的保持一致。express
當我 console.log所抓取數據時,查看控制檯時發現瞭如下錯誤npm
當我在瀏覽器打開我想要的接口的時候,發現沒法查看數據json
出現這種狀況 說明 qq音樂設置Referer使咱們不能直接經過瀏覽器抓接口。axios
所以咱們要對Referer作一些改變後端
跨域資源共享(CORS)機制,是爲了瀏覽器能更爲安全的處理跨域請求,使其不受同源策略的限制。簡單來講就是把須要容許跨域的源寫入response頭裏的Access-Control-Allow-Origin。對應的源就能夠實現跨域資源共享了。跨域
說到同源策略,不得不提到另一個概念——源(Origin)。那什麼是源的呢?源實際上是是個域名(domain),通常請求網頁的那個url的域名就會被制定爲源——如此看來同源策略就能很容易理解了,就是限制Javascript的Ajax請求與源不相同的url。promise
這裏 我寫了一個後端代理接口來解決這個問題
咱們進入到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
發現已經能夠拿到數據了。
不要使用過多的接口 當你的數據訪問量過大 你的ip極可能被封禁