记录vue配置跨域不起作用以及一些理解

记录vue配置跨域不起作用以及一些理解

一.proxytable和proxy的区别

每次搜跨域 都会出来proxytable和proxy 这俩的区别
vue-cli3.0以前使用proxytable
vue-cli3.0以后使用的proxy

二.跨域配置了没有用

先看一组标准的配置及请求(请求方式不一样不用管 地址差不多就行)

服务器地址是:127.0.0.1:4050

不用怀疑自己 这样配置是绝对没问题的 这样我们是成功的

三.不成功的可能因素

1.请求路径写了全路径 这样就是错的 你如果写了全地址 代理的时候变成了
http://127.0.0.1:4050/http://127.0.0.1:4050/test 很显然是不对的

    fetch("http://127.0.0.1:4050/api/test")
      .then((res) => {
        return res.text();
      })
      .then((data) => {
        console.log(data);
      });
1
2
3
4
5
6
7

2. 等我碰到了再更新吧

四.代理的理解

其实你可以看着 当我们碰到请求中带有/api的时候 我们自动带上
target（http://127.0.0.1:4050）

 proxy: {
      // 配置跨域
      "/api": {  //需要代理的请求标识
        target: `http://127.0.0.1:4050`, //请求后台接口
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          "^/api": "", // 重写请求 替换请求当中的api这个字符串
        },
      },
    },
1
2
3
4
5
6
7
8
9
10