vue項目axios請求接口,后端代理請求接口404,問題出現在哪?


  在vue項目中,列表數據需要用到qq音樂接口中的數據,但是直接請求不行,有host及referer限制,需要采用后端代理的方式。借助axios及node的express,在dev-server.js中實現后,重啟項目,結果接口404了。代碼如下:

  

  仔細檢查后,代碼沒問題;於是在apiRouts中console.log()打印信息,運行沒有打印信息,意味着根本沒有運行這部分代碼。於是想到會不會是webpack版本更新,配置發生了改變導致的。所以仔細看了配置后,發現webpack.dev.conf.js確實不同,新版本把devsever直接配置進去了。

  舊版本的webpack.dev.conf.js

  

  新版本的webpack.dev.conf.js

  

  找到原因后,我就百度尋找新版本如何配置了,然后找到了以下這篇文章,按照上面的方法,實測有效,能獲取到數據了。

分享給大家:VUE開發請求本地數據的配置,舊版本dev-server.js,新版本webpack.dev.conf.js

  其他地方不變,只需要把dev-server.js中的代碼去了,加入到webpack.dev.conf.js中即可。以下是我的配置,實測有效。

   

   解決了一個問題,還是挺有收獲的。

  ============================================================================================

       上面的解決方案僅使用於webpack 2+。跨域代理處理,用官方的代理,最終解決方案如下:

       第一步:若按照上面的方案,需要把webpack.dev.conf.js中的后端代理的相關代碼給刪了

  第二步:在config/index.js中加入代理相關的配置

  

  第三步:請求地址改為實際的地址

  

  補充:配置后需要重啟項目。

                  若后續遇到跨域的問題,都可按照這種方案解決。

   

 

  

 


免責聲明!

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



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