Vue跨域配置proxyTable問題

最近在做乙個前後端分離的畢設，在前端向後端傳送get請求時遇到了vue跨域的問題。

been blocked by cors policy: no 『access-control-allow-origin』 header

is present on the requested resource

解決方案如下（以vue腳手架為例）：

1、開啟config資料夾裡面的index.js檔案，找到proxytable引數。這個引數是vue為我們解決跨域問題專門設定的。

2、修改引數（以我的專案為例）。我原本要請求的url是後端的位址，http://localhost:8083/predict/api 但是我前端的位址是http://localhost:8080 於是產生了跨域問題。此時，只需要把proxytable設定成如下

target表示伺服器端的位址,changeorigin表示是否跨域。

『/predict』: {}, 就是告訴node, 我介面只要是』/predict』開頭的就用**.所以你的介面就要這麼寫

『^predict』 :
'predict'

表示將路徑中的predict換為predict，因為我請求路徑中原本就有predict所以我就不用修改，不用修改就是這麼寫。如果你的predict只是為了標識使用**，實際上不存在，那就把predict替換成空，如下。

『^predict』 :
''

注意predict只是我自己的路徑，不是本身就帶有的引數，你需要根據自己的路徑來重寫。

3、修改完之後，還有乙個坑，可能因為瀏覽器、埠存在快取，不會立即生效，這時候可以嘗試把前端的埠改一下再改回去，清除掉快取。還是index.js檔案，修改裡面的port引數的數值即可。

此時，在瀏覽器看到的url依舊是前端的url請求，但是實際上請求會被**至伺服器端

參考文章