问题描述:

前端项目部署在8080,联调时后台项目部署在8083,发生跨域问题
在这里插入图片描述

原因分析:

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

当前页面url被请求页面url是否跨域原因
http://www.test.com/http://www.test.com/index.html同源(协议、域名、端口号相同)
http://www.test.com/https://www.test.com/index.html跨域协议不同(http/https)
http://www.test.com/http://www.baidu.com/跨域主域名不同(test/baidu)
http://www.test.com/http://blog.test.com/跨域子域名不同(www/blog)
http://www.test.com:8080/http://www.test.com:7001/跨域端口号不同(8080/7001)

解决方案:

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、验证结果
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐