webpack 配置 changeOrigin 无效的说明

以下这段话来自官网：https://webpack.js.org/configuration/dev-server/#devserverproxy

The origin of the host header is kept when proxying by default, you can set changeOrigin to true to override this behaviour. It is useful in some cases like using name-based virtual hosted sites.

上面这句话是说：当进行代理时，Host 头部的源默认会保持原装；你可以设置 changeOrigin 为 true 来覆盖这种行为。

假设，如果你的前端服务器是 http://localhost:3000，后端是 http://localhost:8082。

那么后端通过 request.getHeader("Host") 获取依旧是 http://localhost:3000。

如果你设置了 changeOrigin: true，那么后端通过 request.getHeader("Host") 获取才是 http://localhost:8082。代理服务器此时会根据请求的 target 地址修改 Host。

changeOrigin 的配置主要体现在 proxy 代理设置上，一般会这样设置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:80',
        changeOrigin: true
      }
    }
  }
};

有些人可能会通过浏览器 F12 查看 request Header 的 Host，发现它无论怎么修改 changeOrigin，它均为前端服务器地址（http://localhost:3000）。于是就认为 changeOrigin: true 无效。其实不然。而且，设置已经生效了，只是浏览器不会直观地显示给你。

你需要通过后端进行 request.getHeader("Host") 打印，你就能发现区别了。

当不设置 changeOrigin 的时候，后端输出 http://localhost:3000

当设置 changeOrigin: true 的时候，后端输出 http://localhost:8082

这大约是因为，浏览器只是将第一层请求显示给你，也就是发给代理服务器的请求，而修改 Host 的工作是代理服务器做的，浏览器当然不会显示 Host 已经被修改的状态！

webpack 配置 changeOrigin 无效的说明

猜你喜欢