vue：详解vue中的代理proxy

我们本地调试一般都是 npm run serve，然后打开 本机ip:8080（localhost:8080）对吧，这时候我们要调接口调试，后端的接口的地址可能在测试环境，也可能是自己电脑的 ip，总之不是你的 lcoalhost:8080，那么你调接口就会产生跨域，那么怎么办呢？就需要proxy出场了

日常工作中，生产环境用得比较多的跨域方案是cors和nginx反向代理。 本地项目中调试用的最多的就是 node 代理，当然像 nginx、charles（抓包工具）做代理也可以，只要你会配置。

vue 中的 proxy 就是利用了 Node 代理，原理还是因为服务器端没有跨域这一说嘛，也是用了这么一个插件 地址

1、假设你要调取的接口是 http://e.dxy.net/api/test，然后你可以在本地调 localhost:8080/api/test，如axios.get('/api/test') 配置代理后，会做如下转发： localhost:8080/api/test -> http://e.dxy.net/api/test localhost:8080/bcma/api/test -> http://e.dxy.net/bcma/api/test

有新手朋友可能会问：这样做是不是只是本地调试这样做，线上怎么办呢？ 我们一般调接口 axios.get('/api/test')，这样调是自动请求的当前域名，也就是本地就调用 localhost:8080，到了线上就是你们自己的服务域名，所以这个只是为了本地调试使用。当然，如果你要同时调用很多个不同的域名服务，那你调用的时候就要把相关的域名明确写出来，如axios.get('http://e.dxy.net/api/test')

2、当你调接口后端的命名没有统一给接口前加 /api 这类的标识，那么你可以自己加，也就是你可以在本地调 localhost:8080/api/test，如axios.get('/api/test')，而你要的目标接口是 http://e.dxy.net/test，你就可以用 pathRewrite，遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重写为 /。 所以转发效果就是： localhost:8080/api/test -> http://e.dxy.net/test

3、这个是对所有的接口都代理的，不止是检测到 /api 的接口，比如： localhost:8080/api/test -> http://e.dxy.net/api/test localhost:8080/test -> http://e.dxy.net/test

完整版 1、 devServer.disableHostCheck 当设置为true时，此选项将绕过主机检查。不建议这样做，因为不检查主机的应用程序容易受到DNS重新绑定攻击。

2、devServer.publicPath 假设服务器在http://localhost:8080下运行，output.filename设置为bundle.js。默认情况下，devServer.publicPath是/，所以您的包可以作为http://localhost:8080/bundle.js 使用。将devServer.publicPath更改为 /assets/ 就变为 http://localhost:8080/assets/bundle.js

确保devServer.publicPath始终以正斜杠开头和结尾。

完整版本