webpack中使用代理proxy解决端口跨域问题

需求场景

前后端分离，本地服务端使用了8762接口，而我前端dev环境使用9000端口，这时候如果请求8762端口的数据接口，很明显会由于跨域的问题而请求失败，如果让后端做允许开发有麻烦，怎么办呢？

解决方案

随着前端技术的发展，es6以及前端构建工具都成了主流技术，不会用都不好意思出来混了。平时用webpack时用的比较多的本地服务器是webpack-dev-server，刚好它自身集成了代理功能，只要在webpack.dev.config.js里的devServer配置里，加上一段代理配置就能实现跨域了。

使用方法与代码

配置前的devServer代码是:

devServer:{ contentBase: path.join(__dirname,'./release'), open:true, port:9000 },

这时候我们的服务器端口为9000，假设我们原先的请求方式是这样的：

axios.get('http:localhost:8762/distribution/pageList').then(function(response){ console.log(response) })

由于端口不一样，跨域报错是必然的。怎么配置呢？这时候我们要看接口的规律，例如我们这个接口并没有/api，而是有/distribution这个路径，那我们就把所有包含/distribution的请求反向代理到localhost:9000去，可以这样改：

devServer:{ contentBase: path.join(__dirname,'./release'), open:true, port:9000, proxy: { '/distribution': { target: 'http://localhost:8762' } } }

这时候我们再把请求改成这样：

axios.get('/distribution/pageList').then(function(response){ console.log(response) })

这时候我们浏览器控制台里看到的请求是：http://localhost:9000/distribution/pageList，但实际请求是：http:localhost:8762/distribution/pageList，再测试下，这时候会发现数据正常返回，没有报跨域错误了。

搞定，感谢阅读