vue Spring boot 前后端分离部署在不同端口上请求数据(跨域问题解决方案)

  • Post author:
  • Post category:vue


前言:我的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. 测试结果,测试之前要把前端重启一下,因为修改了。



    可以看到完全没有问题的。



版权声明:本文为qq_22194659原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。