vue Spring boot 前後端分離部署在不同端口上請求數據(跨域問題解決方案)

前言：我的Spring boot項目部署在8083端口，我的vue項目部署在8080端口，我想從8083端口拿到數據，這個不同端口之間的聯繫會涉及到跨越問題，在vue中如何解決跨域訪問拿數據呢，請往下面看。

問題引起的原因：

• 這裏以我的vue8080端口訪問Spring boot8083開始。 
  後臺部署情況
  
  前臺部署情況
  
  跨越訪問
  
  所引發的問題
  

解決方案 

1. 配置基本的訪問路徑，找到src目錄下的main.js文件，我們修改如下
   

2. 配置代理路徑，找到config下的index.js文件，修改如下
   

   proxyTable: {               //代理請求路徑
         /* 這個api就是main裏面設置的Axios.defaults.baseURL = '/api' */
         '/api': {
           /* 設置對象路徑 */
           target: "http://127.0.0.1:8083",
           /* 開啓跨域 */
           changeOrigin:true,
           pathRewrite:{
             '^/api':''
           }
         }
       },

    

3.  修改訪問請求路徑

   
   注意這裏的axios是main.js裏面設置的那個全局$axios，因爲設置了默認請求，所有/getInfo前面默認就有index.js裏面設置的“http://127.0.0.1:8083”，兩個合起來就是“http://127.0.0.1:8083/getInfo”.

4. 測試結果，測試之前要把前端重啓一下，因爲修改了。
   
   可以看到完全沒有問題的。