Heroku生产环境部署Express+React应用遇‘Invalid Host Header’问题

嘿，我之前部署create-react-app到Heroku时也碰到过一模一样的Invalid Host Header错误！这个问题的根源是Create React App默认的主机头安全验证机制——为了防止DNS劫持攻击，它会检查请求的Host头是否在允许的白名单里，而生产环境下默认不会自动信任Heroku的域名。

下面给你几个靠谱的解决办法，按推荐程度排序：

方法1：设置Heroku环境变量（最安全推荐） #

这是最规范的解决方式，不需要改代码：

• 登录Heroku控制台，找到你的应用，进入「Settings」标签页
• 滚动到「Config Vars」区域，点击「Reveal Config Vars」
• 添加一条新的环境变量：
  • 键：HOST
  • 值：你的Heroku应用完整域名（比如yourappname.herokuapp.com）
• 保存后，重启你的Heroku应用（可以在「Resources」标签页重启dyno）

CRA的生产构建会自动读取这个HOST变量，把对应的域名加入信任列表，错误就能直接解决。

方法2：配置package.json的homepage字段 #

这个方法不仅能解决主机头问题，还能确保静态资源路径正确：
在项目根目录的package.json里添加homepage字段，值为你的Heroku应用URL：

{
  "name": "your-app-name",
  "homepage": "https://yourappname.herokuapp.com",
  // 其他原有字段...
}

添加完成后，重新运行npm run build生成新的生产构建包，再部署到Heroku即可。

方法3：临时禁用主机检查（仅测试用，不推荐生产） #

如果你只是临时测试，可以通过环境变量关闭主机验证，但这会绕过CRA的安全防护，绝对不要在正式生产环境长期使用：
在Heroku的「Config Vars」里添加变量：

• 键：DANGEROUSLY_DISABLE_HOST_CHECK
• 值：true

另外检查了你的Express服务器代码，生产环境下servebuild文件夹的逻辑是对的，不用修改这部分~

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