本地Docker Compose部署React应用出现Invalid Host header问题求助

问题原因 #

React默认使用的webpack-dev-server在开发模式下会验证请求的Host头，以此防范DNS rebinding攻击。通过Nginx反向代理访问时，请求的Host头默认会被设为容器内部的client:3000，不在dev server允许的主机列表里，因此返回"Invalid Host header"错误。而生产环境用的是构建后的静态文件，不存在这个验证机制，所以能正常运行。

解决方案 #

方案1：修改Nginx配置，传递原始Host头 #

在Nginx的代理规则中添加proxy_set_header Host $host;，把浏览器发送的原始Host头（比如localhost:3050）传递给React开发服务器：

修改后的Nginx配置文件：

upstream client {
  server client:3000;
}

upstream server {
  server server:5000;
}

server {
  listen 80;

  location / {
    proxy_pass http://client;
    # 传递原始Host头
    proxy_set_header Host $host;
  }

  location /sockjs-node {
    proxy_pass http://client;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    # 传递原始Host头
    proxy_set_header Host $host;
  }

  location /api {
    proxy_pass http://server;
  }
}

方案2：修改React客户端启动命令，允许所有主机 #

在React项目的package.json里，修改start命令，添加允许任意主机的参数：

• 针对v5及以上版本的create-react-app：

  "scripts": {
    "start": "react-scripts start --allowed-hosts all"
  }
  

• 针对旧版本create-react-app：

  "scripts": {
    "start": "HOST=0.0.0.0 react-scripts start"
  }
  

修改后重启Docker Compose服务让配置生效：

docker-compose down && docker-compose up --build

方案3：在Docker Compose中设置环境变量 #

在docker-compose.yml的client服务中添加环境变量，强制React dev server监听所有主机并跳过Host校验：

client:
  depends_on:
    - server
    - postgres
  build:
    dockerfile: Dockerfile.dev
    context: ./client
  volumes:
    - /app/node_modules
    - ./client:/app
  environment:
    - NODE_ENV=development
    # 仅本地开发使用，生产环境禁止
    - DANGEROUSLY_DISABLE_HOST_CHECK=true
    # 让服务监听容器所有网络接口，确保Nginx能访问
    - HOST=0.0.0.0

注意：DANGEROUSLY_DISABLE_HOST_CHECK=true仅适用于本地开发，生产环境绝对不能使用，会带来安全风险。

验证 #

修改配置后，重新启动所有服务，访问localhost:3050，应该能正常加载React应用，不再出现"Invalid Host header"提示。

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