今天在研究vue代理跨域的时候,发现了一个很奇怪的问题:vue配置代理访问本地的node接口时,出现跨域问题,但是proxy代理配置的又没有问题。
探索了一下午才找到原因,在此记录一下:

一、问题描述:

vue配置代理访问本地的node接口时,出现跨域问题。

二、问题代码:

devServer: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,
      },
    },
  },
  axios.get("http://127.0.0.1:3000/api/liyfn").then((res) => {
        console.log(res);
      });

出现了跨域
在这里插入图片描述
可以看到,代码确实是没问题的,但是为什么跨域了呢?
在proxy中添加pathReWrite发现也没有生效,推测’/api’规则没有匹配上。
经过反复尝试,发现因为get请求写的是绝对地址,改为相对地址问题即可解决

      axios.get("/api/liyfn").then((res) => {
        console.log(res);
      });

在这里插入图片描述

三、原因分析:

问题已经解决,那我们来分析一下为什么?
开发时配置 proxy 的 name 时请求的是基于 VUE 代理的相对地址,baseURL写绝对路径后,proxy不会对他进行匹配,相当于前端直接访问源地址,所以会跨域。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐