Docker部署React+Node.js访问localhost:3050报Invalid Host header

这个错误是Create React App内置的webpack-dev-server自带的Host头校验机制触发的：服务端会校验请求的Host字段是否在允许列表里，Docker做端口转发时请求的Host值不在默认允许列表中，就会直接返回这个错误。

分场景解决方案 #

• 开发环境（容器内运行react-scripts start启动开发服务）
  1. 宽松配置（仅本地开发可用，禁止生产环境开启）：在React项目根目录新建.env.development文件，写入配置：

     DANGEROUSLY_DISABLE_HOST_CHECK=true
     

     保存后重新构建镜像启动容器即可，这个配置会直接关闭Host头校验。
  2. 安全配置（开发环境优先选这个）：同样在.env.development文件写入指定允许的访问域名，不用全局关闭校验：

     HOST=0.0.0.0
     ALLOWED_HOSTS=localhost,127.0.0.1
     

     这个配置只会放行本地回环地址的访问，不会放开所有来源的请求，没有额外安全风险。
• 生产环境
  不要在生产容器里跑react-scripts start开发服务，先执行npm run build打包出静态资源，用Nginx托管打包后的build目录静态文件即可，开发服务的Host校验逻辑根本不会触发，性能和安全性都比直接跑dev server高很多。如果已经配置了Nginx托管，先检查Dockerfile里的启动命令是不是误写成了开发启动命令。

重启验证 #

改完配置后执行以下命令强制重建容器启动：

docker-compose up --build --force-recreate

启动完成后清空浏览器缓存，再访问localhost:3050即可正常加载页面。

补充排查点：如果改完配置还是报错，先检查docker-compose.yml里的端口映射配置，确认本地3050端口确实映射到了对应React服务的容器端口，没有错绑到其他服务上。

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