了解一下代理

[jyzwf]

最近在使用 webpack 的 devServer 的 proxy 来解决跨域的时候，发现自己之前对这个方式的使用有所误解。下面是一个简化的demo，由 vue-cli 生成，前端项目端口监听在 8080：

这里起了一个 node 服务，用于提供接口，监听在 3001 端口，并且没有做跨域处理。在浏览器中打开，可以清楚的看到前端出现了跨域：

所以想使用 webpack 的 devServer 的 proxy 代理来解决，这里项目是使用 vue-cli 来生成。在 vue.config.js 中做如下配置：

这里当请求包含 /user 时，就直接代理到真正的请求。但当我真正请求的时候，却发现还是跨域了。
😑😑，后来想了下，由于我是由 axios 的实例去请求的接口，同时该实例配置了基础 url ，这样子的话，会以我页面的地址：http://localhost:8080 去请求 http://localhost:3001/user/echo.json 这个接口，这样自然会出现了跨域，代理配置无效，请求图如下：

要修改的话，只要把上述的 axiosIns 换成 axios 即可，这样就做到了同源，自然不会出现跨域问题了，请求图如下：

问题时解决了，但不能停留在只是用的方向上，了解其内部原理也是很重要的。

前端跨域

关于前端跨域是老生常谈的问题了，这里推荐一篇 不要再问我跨域的问题了，其他的可自行搜索。

什么是代理

webpack-dev-server 是如何实现代理的