使用create-react-app部署到Heroku时出现Invalid Host Header错误

问题根源 #

你遇到的Invalid Host Header错误是Create React App生产构建内置的主机头校验机制触发导致的。你之前尝试的setupProxy.js、.env.development配置均仅对本地开发环境生效，部署到Heroku的生产环境不会读取这些配置，因此没有效果。重安装依赖后默认重置了CRA的相关默认规则，所以之前正常的项目出现了该问题。

修复方案 #

1. 关闭生产环境主机头校验 #

在前端项目（client目录，与package.json同级）新增.env.production文件，写入以下配置：

DANGEROUSLY_DISABLE_HOST_CHECK=true

该配置仅对生产环境生效，可直接绕过主机头校验逻辑，适配Heroku的部署域名规则。

2. 补全服务端静态资源托管逻辑 #

你当前的server/index.js仅配置了接口路由，缺失CRA构建后静态资源的托管逻辑，需要补充对应代码：
首先安装path依赖（已安装可跳过）：
npm i path

然后修改server/index.js，在现有代码基础上添加以下内容：

const path = require('path');

// 所有路由定义的末尾添加这段代码
if (process.env.NODE_ENV === 'production') {
  // 托管前端构建后的静态资源
  app.use(express.static(path.join(__dirname, '../client/build')));
  // 适配前端路由，所有未匹配接口的请求都返回前端入口文件
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
  });
}

如果你的项目目录结构和默认结构不同，调整path.join中的路径匹配你的实际build文件位置即可。

3. 确认构建脚本配置 #

检查项目根目录的package.json中是否配置了正确的生产构建脚本，确保Heroku部署时可以自动构建前端资源：

{
  "scripts": {
    "build": "cd client && npm install && npm run build",
    "start": "node server/index.js"
  }
}

4. 重新部署 #

提交修改后的代码到Heroku，部署完成后即可正常访问。

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