webpack 通过 proxy 解决跨域,是基于 webpack-dev-server,devServer 中是关于 proxy 代理的配置。
const devServer = {
proxy: {
'/poi': {
target: 'https://yapi.sankuai.com/mock/2072',
changeOrigin: true,
},
},
}
target: 表示代理到的目标地址
pathRewrite:默认情况下 poi 会被写到目标地址去,如果要删除,在这里设置
changeOrigin:更新代理后 http header 中 host 地址
原理: proxy 本质上利用了 http-proxy-middleware http 代理中间件,实现将请求转发给其他服务器。通过 proxy 实现代理请求后,会在浏览器与服务器之间添加一个代理服务器,本地发送请求时,中间代理服务器接收后转发给目标服务器,目标服务器返回数据,中间代理服务器将数据返回给浏览器。中间代理服务器与目标服务器之间不存在跨域资源问题。