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

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. 使用

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