Heroku部署React应用遇API调用问题及Invalid Host Header报错求助

嘿，你遇到的这两个问题都是Heroku部署前后端分离应用时的典型坑，我来帮你一步步解决：

一、搞定Node API的"Invalid Host Header"错误 #

这个报错本质是Express默认会校验请求的Host头是否合法，但Heroku的请求会经过它的反向代理，导致Host头和你的API预期的不匹配。有两个简单的修复方式：

• 方法1：让Express信任Heroku的代理
  在你的API主文件（比如server.js）里加一行代码，告诉Express要信任反向代理传来的请求头：

  app.set('trust proxy', true);
  

  这行代码会让Express正确识别Heroku的代理请求，不会再拦截Host头。

• 方法2：用CORS中间件精准控制允许的域名
  如果你需要同时解决跨域问题，直接用cors中间件配置允许访问API的域名（也就是你的React应用地址）：

  1. 先安装依赖：

     npm install cors
     

  2. 在API代码里引入并配置：

     const cors = require('cors');
     // 用环境变量配置，方便本地和生产环境切换
     const allowedOrigins = [
       process.env.REACT_APP_URL, // 生产环境填你的React应用Heroku地址，比如https://your-react-app.herokuapp.com
       'http://localhost:3000' // 本地开发环境地址
     ];
     app.use(cors({
       origin: (origin, callback) => {
         // 允许Postman这类不带origin的请求，或者在白名单里的域名
         if (!origin || allowedOrigins.includes(origin)) {
           callback(null, true);
         } else {
           callback(new Error('Not allowed by CORS'));
         }
       },
       credentials: true // 如果你的API需要传递cookie或认证信息，就开这个
     }));
     

  记得去Heroku的API应用设置里添加REACT_APP_URL这个环境变量，值就是你的React应用的Heroku URL。

二、解决React部署后无法访问另一dyno API的问题 #

首先要明确：package.json里的proxy配置只在本地开发时有用（是create-react-app开发服务器的转发功能），生产环境部署到Heroku后完全不生效，所以你移除它之后应用能跑，但API调用会因为跨域或路径不对失败。

按照下面的步骤调整：

1. 给React配置环境变量
   去Heroku的React应用设置里加一个环境变量，比如REACT_APP_API_URL，值是你的Node API的Heroku地址（比如https://your-node-api.herokuapp.com）。
   本地开发的话，在项目根目录建个.env.development文件，写：

   REACT_APP_API_URL=http://localhost:5000
   

   这样本地和生产环境会自动用对应的API地址，不用改代码。

2. 修改React里的API调用代码
   把原来的相对路径（比如/api/getData）改成用环境变量拼接的绝对路径：

   // 原来的写法（本地靠proxy转发）
   // fetch('/api/getData')
   // 修改后的写法
   fetch(`${process.env.REACT_APP_API_URL}/api/getData`)
     .then(res => res.json())
     .then(data => console.log(data))
     .catch(err => console.error('API调用失败:', err));
   

3. 配合API的CORS配置
   结合第一部分的CORS设置，确保React应用的域名在API的允许列表里，这样就不会出现跨域错误了。

最后几个小提醒 #

• 改完环境变量后，记得重启Heroku的dyno，不然变量不会生效：

  heroku restart --app your-app-name
  

• 如果还是有问题，用Heroku日志排查：

  heroku logs --tail --app your-app-name
  

  日志里会显示具体的错误信息，比如API调用的错误、CORS报错之类的，方便你定位问题。

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