在Heroku上部署ReactJS应用时出现“Invalid Host header” HOST配置错误？

Question

我正在尝试将我的React应用程序放到Heroku上。整个项目包括一个API（express）和一个客户端（ReactJS）。我已经将我的API放在了Heroku上。但是当我将我的客户端放在Heroku上时，它显示构建成功。但是当我打开它时，它显示无效的主机头。

我在谷歌上搜索了这个问题，很多人告诉我要配置HOST。但他们使用的是webpack。我使用create-react-app构建，并通过npm start运行它。我想知道如何以最简单的方式解决这个问题。谢谢。

- fourth

Answer 1

如果由于任何原因您尝试在没有服务器的情况下部署客户端，请确保删除：

"proxy": "http://localhost:5000"

从客户端的package.json中..

2019年7月更新:

Create React App 2.0 已经改变了我们定义代理的方式。 要确定您正在使用的版本，请检查客户端side package.json: "react-scripts" 大于 "2.x.x"

现在在client/目录中安装此软件包：

npm install http-proxy-middleware --save

在client/src/目录中创建setupProxy.js文件。不需要在任何地方导入此文件，CRA会查找名为setupProxy.js的文件并加载它。有不同的方法来添加代理： Option 1: const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    createProxyMiddleware(["/api", , "/otherApi"], { target: "http://localhost:5000" })
  );
};

选择二

 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 服务器只在开发环境中运行，因此当应用程序以PROD模式运行时，它只用于生成将由Node / Express服务器提供的生产JS捆绑包。

有关如何使其在生产环境中运行的问题，请参阅此其他答案。

- Roberto Rodriguez

---

非常感谢，@Roberto。如果有服务器怎么办？例如，Node、React应用程序？你不应该使用代理吧？在客户端中必须运行run build以创建生产环境的静态文件吗？ - Shane

代理仅在开发模式下使用，其中React App在一个端口上运行，Express服务器在另一个端口上运行。在生产模式下，通常所有内容都将在同一端口下运行。 - Roberto Rodriguez

当我将代理URL设置为我的Heroku API服务器时，我看到“ECONNREFUSED”（无法建立连接，因为目标计算机积极拒绝了它。这通常是由于尝试连接到外部主机上未激活的服务而导致的）。 - s2t2

s2t2和dam，我为你们更新了我的答案，希望能对你们有所帮助。 - Roberto Rodriguez

@RobertoRodriguez - 你是我的救星。我已经为此奋斗了3天；谢谢你。我建议的编辑是：const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) { app.use(createProxyMiddleware('/flask/**', { target: 'http://localhost:5000' })); }; - DataGuru

Answer 2

Invalid Host Header被用作解决DNS Rebinding问题的一种方案。

为了解决这个问题，您需要在create-react-app的根目录中创建一个名为.env.development的文件。在该文件中设置：

HOST=name.herokuapp.com

从文档中得知：https://create-react-app.dev/docs/proxying-api-requests-in-development/#invalid-host-header-errors-after-configuring-proxy

该文档介绍了在开发环境下代理API请求的方法。如果您在设置代理后遇到“无效主机头错误”，则需要进行一些额外配置。具体步骤请参考上述链接。

- Agney

---

客户端或服务器的根目录内部？ - Jake

这并不能解决我的问题，我的本地终端日志显示：在name.herokuapp.com上找不到开放的端口。 - rickvian

Answer 3

在我的情况下，当我使用webpack在开发模式下运行React应用程序时，会出现这种情况。我通过在webpack.config.js文件中设置allowedHosts的值来解决了这个问题。您可以从官方webpack文档中了解有关allowedHosts属性的更多信息。

对于我的情况，我将以下代码添加到webpack.config.json的module.exports中：

module.exports = {
    // Some stuff that already exists before
    //.
    //.
    //.
    devServer: {
        allowedHosts: 'all'
    },
}

注意: 不建议在allowedHosts属性中使用all，因为存在安全问题。请确保指定应用程序必须运行的特定主机。

- Suraj S Jain

Answer 4

在我的情况下，问题是由于在开发过程中使用的环境变量未在生产中读取引起的，因为包含环境变量的 .env 文件被包含在我的 .gitignore 中。

为了解决这个问题，我将环境变量添加到 Heroku 主机上。从 Heroku 应用程序: 设置 -> Congif 变量 -> 显式 Config 变量

然后在此处添加与开发中使用的相同的环境变量。一旦完成，错误就消失了！

在应用程序中使用的环境变量

const accessToken = jwt.sign(
      { "userName": foundUser.userName },
      process.env.REACT_APP_ACCESS_TOKEN_SECRET,
      { expiresIn: '2h' },
);

const refreshToken = jwt.sign(
      { "userName": foundUser.userName },       
      process.env.REACT_APP_REFRESH_TOKEN_SECRET,
      { expiresIn: '1d' },
);

在Heroku，配置变量中使用相同的环境变量

- richard.seward

---

请勿发布代码图片，将您的代码复制到问题中，并使用块代码格式：https://stackoverflow.com/help/how-to-ask - borchvm

@borchvm 谢谢你提醒！回复已经更新，没有包含代码图片。不过，Heroku配置变量的图片还在。不确定有没有更好的方式将其包含在回复中，除了发布一张图片和描述。如果有更好的方式，请告诉我！ - richard.seward