我正在尝试将我的React app 放在 Heroku 上。整个项目包括一个 API（express）和一个客户端（ReactJS）。我已将我的 API 放在 heroku 上。但是当我把我的客户放在 Heroku 上时，它显示构建成功。但是当我open 它时，它显示Invalid Host header。
我google了这个问题，很多人告诉我配置HOST。但他们正在使用 webpack。我使用create-react-app 构建它，并通过npm start 运行它。我想知道如何以最简单的方式解决这个问题。谢谢。
【问题讨论】：
标签： javascript reactjs heroku webpack redux
如果您出于任何原因尝试在没有服务器的情况下部署客户端，请确保删除：
"proxy": "http://localhost:5000"
来自客户端的 package.json..
2019 年 7 月编辑：
Create React App 2.0 改变了我们定义代理的方式。 要确定您使用的是哪个版本，请检查您的客户端 package.json：“react-scripts”大于“2.x.x”
现在在 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' }));
};
回答 cmets
此代理仅用于开发环境。在生产/Heroku 中，一切都在同一台服务器下运行，因此不需要 Proxy。
create-react-app 服务器只是在 Dev 环境中运行，所以当应用程序在 PROD 模式下运行时，它只是用于生成将由 Node/ 服务的生产 JS 包快递服务器。
查看this other answer，了解如何使其在生产中运行的问题。
【讨论】：
run build 才能创建用于生产的静态文件？
Invalid Host Header 已作为DNS Rebinding 的解决方案加入。
要解决这个问题，您必须在 create-react-app 根文件夹中创建一个名为 .env.development 的文件。在这个文件中，设置
HOST=name.herokuapp.com
【讨论】：