在前端項目中利用后端做接口代理


 

在做vue-music的項目中,需要去請求qq音樂的相關api,可是直接前端去拿數據是拿不到的,會報服務器500的錯誤,但是單獨打開該網頁是沒有問題的,這個問題說明服務器本身是沒有問題的,於是想辦法解決唄

在查到的資料中說可以又一個后端代理的辦法,首先理解一下它的原理:

有些 header 在瀏覽器端是不能直接設置的,比如 referer。而 QQ 音樂一些的接口服務端(猜測)會驗證 referer 或者是 host 這些 header。所以我們相當於通過一種代理的方式,先把請求發送給我們自己的 server(express 的 node 服務),然后我們的 server 在把這條請求轉發到 QQ 音樂的服務端,而我們的 server 去請求 QQ 音樂的 server 也是通過 http 請求,和瀏覽器不同的是這個時候我們是可以設置任意 header 的。

 

 然后在遇到的第一個坑就是vue-cli之前的版本生產的build里面的配置文件是dev.server,所以之前的版本是在dev.server中寫這樣的配置:

顯然現在的版本是沒有辦法寫這樣的配置了,因為vue-cli搭起來的配置文件是webpack.dev.config.js,所以我們現在要在這里配置,

首先還是安裝express(來做代理),然后:

最后在這里添加:

然后你在檢查頭的時候,驚奇的發現,並且成功的拿到數據了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM