如何处理webpack-dev-server代理中被代理服务器的重定向问题？

你的问题核心是Docker容器内的webpack-dev-server代理后端nginx服务时，后端返回的重定向Location头包含了容器内部的服务名nginx:8000，导致浏览器无法正确跳转。以下是可行的解决办法：

手动重写Location响应头 #

http-proxy-middleware的autoRewrite和hostRewrite在Docker内部服务名场景下可能无法正常识别替换规则，最可靠的方式是通过onProxyRes钩子手动修改响应头：

修改你的webpack devServer配置，在proxy的**规则中添加onProxyRes函数：

devServer: {
   port: 8080,
   host: '0.0.0.0', // 允许外部容器访问
   disableHostCheck: true,

   watchOptions: {
      poll: 1000
   },
   writeToDisk: true,

   proxy: {
      "**": {
         target: "http://nginx:80", // 代理到后端容器
         changeOrigin: true,
         secure: false,
         logLevel: "debug",
         // 新增：手动重写Location头
         onProxyRes: (proxyRes) => {
           if (proxyRes.headers.location) {
             // 将容器内部的服务地址替换为宿主机可访问的地址
             proxyRes.headers.location = proxyRes.headers.location.replace('nginx:8000', 'localhost:8080');
           }
         }
      }
   }
}

原理说明 #

后端nginx容器返回重定向时，会基于自身的服务名和端口生成Location地址（比如nginx:8000/login），但浏览器只能识别宿主机的localhost:8080地址。通过onProxyRes钩子拦截响应，直接替换Location头中的容器地址为宿主机地址，就能让浏览器正确跳转。

备选方案（修改后端nginx配置） #

如果允许修改后端nginx的配置，可以在nginx配置中设置正确的server_name和重定向参数，让它返回基于外部访问地址的Location：

server {
  listen 80;
  server_name localhost;

  # 重定向时使用正确的外部地址
  return 302 http://localhost:8080$request_uri;
}

不过开发环境下，前端代理层处理更灵活，无需改动后端配置。

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