1.錯誤分析
這里我調用的是qq音樂的一個接口
所有的的參數 都和qq音樂那邊的保持一致。
當我 console.log所抓取數據時,查看控制台時發現了以下錯誤
其實禁止跨域請求是瀏覽器本身的一種安全策略。
2.跨域資源共享(Cross-Origin-Resource-Sharing)
跨域資源共享(CORS)機制,是為了瀏覽器能更為安全的處理跨域請求,使其不受同源策略的限制。簡單來說就是把需要允許跨域的源寫入response頭里的Access-Control-Allow-Origin。對應的源就可以實現跨域資源共享了。
3.解決方法
這里 我寫了一個后端代理接口來解決這個問題
我們進入到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可能會被他們封禁