Webpack proxy 跨域实现原理

webpack 通过 proxy 解决跨域，是基于 webpack-dev-server，devServer 中是关于 proxy 代理的配置。

1.  
   const devServer = {
2.  
   proxy: {
3.  
   '/poi': {
4.  
   target: 'https://yapi.sankuai.com/mock/2072',
5.  
   changeOrigin: true,
6.  
   },
7.  
   },
8.  
   }

target: 表示代理到的目标地址

pathRewrite：默认情况下 poi 会被写到目标地址去，如果要删除，在这里设置

changeOrigin：更新代理后 http header 中 host 地址

原理： proxy 本质上利用了 http-proxy-middleware http 代理中间件，实现将请求转发给其他服务器。通过 proxy 实现代理请求后，会在浏览器与服务器之间添加一个代理服务器，本地发送请求时，中间代理服务器接收后转发给目标服务器，目标服务器返回数据，中间代理服务器将数据返回给浏览器。中间代理服务器与目标服务器之间不存在跨域资源问题。

这篇好文章是转载于：学新通技术网