javascript Heroku中的ReactJS APP“无效的主机头”主机配置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49165232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS APP in Heroku "Invalid Host header" HOST configuration?
提问by fourth
I am trying to put my React appon the Heroku. The whole project include one API (express) and one client (ReactJS). I have put my API on heroku. But when I put my client on Heroku, it shows build succeeded. But when I openit, it shows Invalid Host header.
我正在尝试将我的React 应用程序放在 Heroku 上。整个项目包括一个API（express）和一个客户端（ReactJS）。我已将我的 API 放在 heroku 上。但是当我将我的客户端放在 Heroku 上时，它显示构建成功。但是当我打开它时，它显示Invalid Host header.
I google this problem and many people tell me to configure the HOST. But they are using webpack. I build this with create-react-appand I run it by npm start. I want to know how to solve this problem in most easy way. Thanks.
我谷歌这个问题，很多人告诉我配置HOST。但是他们正在使用 webpack。我用create-react-app它构建并运行它npm start。我想知道如何以最简单的方式解决这个问题。谢谢。
回答by Roberto Rodriguez
If for any reason you were trying to deploy the client without the server, make sure to remove the:
如果出于任何原因您尝试在没有服务器的情况下部署客户端，请确保删除：
"proxy": "http://localhost:5000"
from the package.json of the client..
来自客户端的 package.json ..
Edit July 2019:
2019 年 7 月编辑：
Create React App 2.0 has changed how we define Proxies. To determine which version you are using, check your client side package.json: "react-scripts" greater than "2.x.x"
Create React App 2.0 改变了我们定义代理的方式。要确定您使用的是哪个版本，请检查您的客户端 package.json：“react-scripts”大于“2.xx”
Now in the client/ directory install this package:
现在在 client/ 目录中安装这个包：
npm install http-proxy-middleware --save
Create setupProxy.js file in client/src/ directory. There is no need to import this file anywhere, CRA looks for a file by this name and loads it.
在 client/src/ 目录中创建 setupProxy.js 文件。无需在任何地方导入此文件，CRA 会查找此名称的文件并加载它。
There are different ways to add proxies:
添加代理有多种方式：
Option 1:
选项1：
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(
proxy(["/api", , "/otherApi"], { target: "http://localhost:5000" })
);
};
Option 2
选项 2
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api/**', { target: 'http://localhost:5000' }));
app.use(proxy('/otherApi/**', { target: 'http://localhost:5000' }));
};
Answering to comments
回复评论
This proxy is just used in development environment. In production/Heroku everything runs under the same server, so there is not need for Proxy there.
此代理仅用于开发环境。在生产/Heroku 中，一切都在同一服务器下运行，因此那里不需要代理。
create-react-appserver just runs in Dev environment, so when the application is run in PROD mode, it is just used to generate the production JS bundle that will be served by the Node/Express server.
create-react-app服务器只运行在 Dev 环境中，所以当应用程序在 PROD 模式下运行时，它只是用于生成将由 Node/Express 服务器提供的生产 JS 包。
Please check this other answerwhere I explain what is needed to make it work in production.
请检查这个其他答案，其中我解释了使其在生产中工作所需的条件。
回答by Agney
Invalid Host Headerhas been put in as a solution to DNS Rebinding.
Invalid Host Header已作为DNS 重新绑定的解决方案投入使用。
To solve this, you have to create a file named .env.developmentin the root folder. Inside this file, set
要解决这个问题，您必须在根文件夹中创建一个名为.env.development的文件。在这个文件中，设置
HOST=name.herokuapp.com
From the Documentation: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy
从文档：https: //github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy
