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. 测试结果，测试之前要把前端重启一下，因为修改了。
   
   可以看到完全没有问题的。