通过域名访问网站时出现Invalid host错误，IP访问正常

核心原因 #

React开发服务器（npm start启动）默认校验请求Host头，仅允许localhost、127.0.0.1或服务器IP访问，域名不在白名单内会触发Invalid host错误；同时CORS配置的域名缺少协议前缀，也可能导致访问异常。

修复步骤 #

1. 配置React开发服务器允许域名访问 #

React开发模式下需手动添加域名到Host白名单，两种方式可选：

• 修改package.json启动命令：

  "scripts": {
    "start": "HOST=domain.io,www.domain.io PORT=3000 react-scripts start"
  }
  

  若为Windows服务器，命令改为：set HOST=domain.io,www.domain.io && react-scripts start
• 创建环境变量文件：在React项目根目录新建.env.development文件，写入：

  HOST=domain.io,www.domain.io
  PORT=3000
  

  修改完成后重启pm2应用：

  pm2 restart appone
  

2. 修正CORS配置的域名前缀 #

CORS的origin需包含完整协议（http/https），更新Node后端配置：

app.use(
  cors({
    origin: ['http://XX.XXX.XXX.XXX', "http://domain.io", "http://www.domain.io"],
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
    preflightContinue: false,
    credentials: true, 
  })
);

重启Node服务生效：

pm2 restart appone

3. 验证Nginx配置（确保生效） #

检查Nginx配置语法并重启服务：

sudo nginx -t
sudo systemctl restart nginx

4. 生产环境优化建议（必做） #

开发模式（npm start）性能低且存在安全隐患，不适合线上部署。建议构建React生产包：

npm run build

之后用Nginx直接托管build文件夹，或通过Node服务器静态托管，彻底避免开发模式的Host校验限制。

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