《vue》设置代理服务器devServer 的 proxy

问题描述：

在开发环境，vue-cli 会帮我们创建一个开发服务器(http://localhost:8080)，因此，我们请求后端服务器的时候，可能会出现跨域问题，因为跨域的三要素：域名、端口、协议其一不同。

此方法，只适用于开发阶段环境，也就是你用npm run serve等命令打造的一个临时本地的临时服务器，生产环境不生效！！（生产阶段一般没必要解决跨域，毕竟一般都处于相同的服务器中，如果实在要在生产阶段跨域，后端用CORS解决吧）

说明：

完整的请求地址：

http://localhost:8023/api/articles/page?page=1&limit=7

我的这个地址，里面本身就携带有api字段的

跨域解决方法：

利用 vue-cli 中的 devServer配置

devServer: {
  // disableHostCheck: true, // 依赖一些工具可实现内网穿透 (这里没什么用)
  port: 8023, //本地项目端口
  proxy: {
    "/api": { // 这个意思是：原先以 /api 开头的请求
      target: 'http://guozhenqiang.xyz', // 凡是以 /api 开头的请求，通通请求这个服务器
      changeOrigin: true, // 允许跨域
      /* pathRewrite:{
        '^/api': ''  // 上面那个 /api 替换成这个(如果原来的请求中没有这个 /api，可以使用这个方法将以 /api 开头的这个去掉)
      } */
    }
  }
},

记住，如果你的地址没有类似我那个地址那样，有个api作为标识的，你可以手动在地址上加上一些标识，然后利用 pathRewrite 再抹掉即可。

比如我想用yyds作为标识（即地址中有yyds字段的，请求远程服务器）：

正确的远程服务器的完整请求：

http://guozhenqiang.xyz/articles/page

使用标识：

const url = `yyds/articles/page`;  // yyds标识一下
axios.get(url);

pathRewrite:{
        target: 'http://guozhenqiang.xyz',
        '^/yyds': ''  // 将yyds从请求中抹去，这样，请求就变成：http://guozhenqiang.xyz/articles/page
        // 如果不抹去，请求就是：'http://guozhenqiang.xyz/yyds/articles/page
  }

如果想直接将整个项目都代理远程的服务器：

  proxy: {
    "/": { // 所有请求
      target: 'http://guozhenqiang.xyz',
      changeOrigin: true,
    }
  }

一般不会这么做，这样做意义也不大。因为这么做的话，不单单ajax请求都用的远程，连js、css、图片等其他资源都是远程返回的。。。

设置完后，记得重新启动项目！！

一些注意事项：

用了这个方法，在开发阶段，就不用设置 axios 中的 baseUrl 了，或者这样设置：

// require.js
axios.defaults.baseURL =
  process.env.NODE_ENV === "production"
    ? "http://guozhenqiang.xyz/api"
    : "/api";

然后开发阶段，你的一些ajax的请求的 url 就会匹配到/api开头，设置 proxy了

千万不要这么设置：

// require.js
axios.defaults.baseURL =
  process.env.NODE_ENV === "production"
    ? "http://guozhenqiang.xyz/api"
    : "http://localhost:8080/api";  // 这里不要写全地址

// vue.config.js
proxy: {
  "http://localhost:8080/api": {
    target: 'http://guozhenqiang.xyz',
    changeOrigin: true,
    pathRewrite:{
        '^/http://localhost:8080': ''   // 抹掉也不行
      } 
  }
}

看似匹配到了，实际上没有生效。。。（我也不知道为什么，知道的同学说一下）

设置了代理后，按F12看了一下请求，还是localhost?

image.png

实际上，这里是看不到的。。
因为，F12 这里的这个请求，实际上是发给了 本地的临时服务器，再由本地的服务器发送给远程服务器。

可以这么理解：本地服务器将F12的这个请求拦截了，然后自己偷偷改掉 url，再请求的远程服务器。

正因为本地服务器脱离浏览器的束缚，解决了跨域问题！