在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中加入代理相關的配置
第三步:請求地址改為實際的地址
補充:配置后需要重啟項目。
若后續遇到跨域的問題,都可按照這種方案解決。