Vue.js3 之 跨域問題解決方案

1. 通常情況下, Vue專案需要向後端或者第三方的API取資料, 此時會涉及到跨域問題, 以及跨多個域的問題.
2. 網上給了很多方案, 但是都解決不了我的問題.
3. 我的問題如下:
   1. Vue專案的埠為9999
   2. 後端專案的埠為9991
   3. 第三方API為固定域名且埠為預設值
4. 如果前後端專案都部署在同一臺伺服器的同一個域中, 只要手動將port改變一下即可, 不用考慮問題, 但是涉及到不同伺服器的不同域的情況下則需要, 配置跨域.

5. 這裡直接給出我的解決方法, 不做過多解釋, 想了解更多的, 請自行谷歌.
6. Vue的版本為最新版Vuejs3.0.4, vue-cli4.5

7. 操作:
   1. 使用axios時, 不傳入baseURL引數:
   
   2.在專案的根目錄建立配置檔案vue.config.js.
   
   3.配置跨域
   
   
   ```
   proxy: {
   '^/V1': {
   target: https://localhost:9991,
   //port: '9991',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
   '^/V1': ''
   }
   },
   '^/V2': {
   target: xxx,
   ws: true,
   changeOrigin: true,
   pathRewrite: {
   '^/V2': ''
   }
   }
   },

      4. 可以配置多個跨域, V1  V2 表示將要用target替換, 注意: target要使用反單引號, 否則可能會引起跨域無效, 包括^/符號也要注意, 否則也有可能引起跨域無效.
      5. 使用
![](https://img2020.cnblogs.com/blog/941310/202101/941310-20210121171824001-58117626.png)

>8. 總結: 細節決定成敗, 注意細節將大大節省時間