我正在尝试将我的React 应用程序放在 Heroku 上。整个项目包括一个API（express）和一个客户端（ReactJS）。我已将我的 API 放在 heroku 上。但是当我将我的客户端放在 Heroku 上时，它显示构建成功。但是当我打开它时，它显示Invalid Host header.
我谷歌这个问题，很多人告诉我配置HOST。但是他们正在使用 webpack。我用create-react-app它构建并运行它npm start。我想知道如何以最简单的方式解决这个问题。谢谢。
如果出于任何原因您尝试在没有服务器的情况下部署客户端，请确保删除：
"proxy": "http://localhost:5000"
来自客户端的 package.json ..
2019 年 7 月编辑：
Create React App 2.0 改变了我们定义代理的方式。要确定您使用的是哪个版本，请检查您的客户端 package.json：“react-scripts”大于“2.xx”
现在在 client/ 目录中安装这个包：
npm install http-proxy-middleware --save
在 client/src/ 目录中创建 setupProxy.js 文件。无需在任何地方导入此文件，CRA 会查找此名称的文件并加载它。
添加代理有多种方式：
选项1：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
createProxyMiddleware(["/api", , "/otherApi"], { target: "http://localhost:5000" })
);
};
选项 2
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(createProxyMiddleware('/api/**', { target: 'http://localhost:5000' }));
app.use(createProxyMiddleware('/otherApi/**', { target: 'http://localhost:5000' }));
};
回复评论
此代理仅用于开发环境。在生产/Heroku 中，一切都在同一服务器下运行，因此那里不需要代理。
create-react-app服务器只运行在 Dev 环境中，所以当应用程序在 PROD 模式下运行时，它只是用于生成将由 Node/Express 服务器提供的生产 JS 包。
有关如何使其在生产中工作的问题，请查看其他答案。
Invalid Host Header已作为DNS 重新绑定的解决方案投入使用。
要解决这个问题，您必须在根文件夹中创建一个名为.env.development的create-react-app文件。在这个文件中，设置
HOST=name.herokuapp.com
来自文档：https : //create-react-app.dev/docs/proxying-api-requests-in-development/#invalid-host-header-errors-after-configuring-proxy