webpack 配置 changeOrigin 无效的说明

原创已于 2022-09-08 00:04:58 修改 · 1.4w 阅读

56 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript

于 2020-09-26 02:40:58 首次发布

前端专栏收录该内容

5 篇文章

订阅专栏

本文解析了webpack devServer中changeOrigin配置的作用，强调其修改Host头部而非Origin，对比前后端服务器地址变化，指导如何正确设置以实现跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下这段关于 changeOrigin 配置属性说明的话来自官网：DevServer | webpack

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 来覆盖这种行为。

注意：changeOrigin 属性名字具有误导性，它并不是表示修改 Origin 头部，而是表示修改 Host 头部的 Origin（原始值）。从上面官网的那句话中 the origin of the host 也可以理解出来。

Host 头部的作用是标识你请求哪一个主机（具体到主机名和端口），主机名可以供一些多站点服务器（Apache、Nginx）进行请求派发。请求关于 Host 头部的作用具体可以参考 Host - HTTP | MDN 或者更多详细资料。

假设，如果你的前端服务器是 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 已经被修改的状态！