EC2部署React应用后，域名加端口访问报Invalid Host Header求助

核心原因 #

「Invalid Host Header」错误本质是React应用的主机头校验机制拦截了域名请求，默认情况下React开发服务器（或部分生产配置）只允许localhost、本地IP访问，域名不在允许列表内，和HTTPS/HTTP本身无关。

方案1：修改React应用的主机配置 #

情况A：使用create-react-app开发环境（未生产构建）

• 临时解决：启动React时添加HOST参数，允许域名访问：

  HOST=demo.example.com npm start
  

• 持久化解决：在项目根目录创建.env文件，添加：

  HOST=demo.example.com
  # 或者开发环境下临时关闭校验（生产环境禁用）
  # DISABLE_HOST_CHECK=true
  

情况B：生产构建后的React应用

• 构建时指定正确的PUBLIC_URL：

  PUBLIC_URL=https://demo.example.com npm run build
  

• 确保后端Node.js服务配置CORS时允许该域名：

  const cors = require('cors');
  app.use(cors({ origin: 'https://demo.example.com' }));
  

方案2：修正Apache反向代理配置（推荐，避免直接暴露端口） #

你的当前Apache配置仅绑定了域名到80端口，未处理3000端口的转发。正确配置是用Apache做反向代理，将域名请求转发到容器内的React服务：

1. 启用Apache代理模块：

   sudo a2enmod proxy proxy_http
   sudo systemctl restart httpd
   

2. 修改httpd.conf（或新建虚拟主机配置文件）：

   # HTTP 80端口配置
   <VirtualHost *:80>
       ServerName demo.example.com
       # 将所有请求转发到本地3000端口（容器映射的端口）
       ProxyPass / http://localhost:3000/
       ProxyPassReverse / http://localhost:3000/
   </VirtualHost>
   
   # 如果使用HTTPS（需先配置SSL证书）
   <VirtualHost *:443>
       ServerName demo.example.com
       SSLEngine on
       SSLCertificateFile /path/to/cert.pem
       SSLCertificateKeyFile /path/to/privkey.pem
       ProxyPass / http://localhost:3000/
       ProxyPassReverse / http://localhost:3000/
   </VirtualHost>
   

3. 重启Apache生效：

   sudo systemctl restart httpd
   

配置完成后直接访问demo.example.com即可，无需再加:3000端口，同时自动解决Host Header问题。

方案3：容器部署的额外检查 #

• 确认React容器的端口映射正确：比如运行容器时用-p 3000:3000将容器端口映射到EC2的3000端口。
• 若使用Docker Compose，确保端口配置正确：

  services:
    react-app:
      image: your-ecr-repo/react-image:latest
      ports:
        - "3000:3000"
  

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