问题描述：

前端项目部署在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
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue