解决跨域问题之 proxy

最新推荐文章于 2024-05-04 04:34:05 发布

A徐艳妮

最新推荐文章于 2024-05-04 04:34:05 发布

阅读量1k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_63713206/article/details/124573263

版权

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 实现代理请求后，会在浏览器与服务器之间添加一个代理服务器，本地发送请求时，中间代理服务器接收后转发给目标服务器，目标服务器返回数据，中间代理服务器将数据返回给浏览器。中间代理服务器与目标服务器之间不存在跨域资源问题。