如何在Webpack 4 Dev Server中配置Apache虚拟主机作为后端代理？

我来帮你搞定这个代理配置的问题！你遇到的情况是因为虚拟主机通常依赖请求头里的Host字段来识别站点，而Webpack Dev Server默认不会修改这个字段，导致Apache无法正确路由到你的虚拟主机。下面是修正后的配置和关键说明：

修正后的代理配置 #

...
devServer: {
  contentBase: '../backend/public',
  compress: true,
  proxy: {
    "/backend": {
      target: "http://my-wonderful-virtualhost.com",
      pathRewrite: {"^/backend" : ""},
      // 核心配置：让代理修改Host头匹配目标虚拟主机域名
      changeOrigin: true,
      // 可选：如果虚拟主机用了非80的自定义端口，记得在target里明确加上，比如http://my-wonderful-virtualhost.com:8081
      // 可选：开启debug模式查看代理日志，方便排查问题
      // debug: true
    }
  },
  hot: true
},
...

关键注意事项 #

• changeOrigin: true是解决问题的核心：这个配置会让Webpack Dev Server在转发请求时，自动将Host请求头替换为目标虚拟主机的域名，这样Apache就能正确识别并路由到你的站点了。
• 确认虚拟主机端口：如果你的Apache虚拟主机没有使用默认的80端口，一定要在target里明确指定端口号，避免代理到错误的服务。
• 重启Webpack Dev Server：修改配置后必须重启服务，否则新的代理规则不会生效。
• 强制刷新浏览器：有时候浏览器会缓存旧的请求地址，按Ctrl+Shift+R强制刷新页面再测试。
• 验证虚拟主机可用性：先在终端用curl http://my-wonderful-virtualhost.com/users/login测试，确保虚拟主机本身能正常响应请求，排除站点配置问题。

按照上面的配置修改后，前端请求/backend/users/login应该就能正确代理到http://my-wonderful-virtualhost.com/users/login了。

内容的提问来源于stack exchange，提问作者Alexis Romot