Heroku“无效主机标头”主机配置中的ReactJS APP？

Posted 2023-02-22

【中文标题】Heroku“无效主机标头”主机配置中的ReactJS APP？

【英文标题】：ReactJS APP in Heroku "Invalid Host header" HOST configuration?

【发布时间】：2018-08-16 08:11:31

【问题描述】：

我正在尝试将我的React app 放在 Heroku 上。整个项目包括一个 API（express）和一个客户端（ReactJS）。我已将我的 API 放在 heroku 上。但是当我把我的客户放在 Heroku 上时，它显示构建成功。但是当我open 它时，它显示Invalid Host header。

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

【参考方案1】：

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

"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，了解如何使其在生产中运行的问题。

【讨论】：

但是如果您删除代理，如何将请求发送到后端？您明确指定路径？

@Kittichote Kamalapirat 我更新了我的答案来回答你的问题。希望对你有帮助

非常感谢@Roberto。如果有服务器呢？例如，Node、React 应用程序？您不应该为此使用代理吗？您是否必须在客户端 run build 才能创建用于生产的静态文件？

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

@RobertoRodriguez - 你是我的救星。过去 3 天我一直在与此作斗争；谢谢我建议的编辑是 const createProxyMiddleware = require('http-proxy-middleware'); module.exports = function(app) app.use(createProxyMiddleware('/flask/**', target: 'localhost:5000' )); ;

【参考方案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

【讨论】：

在客户端或服务器的根目录内？

这无法解决我的问题，我的本地 teriman 日志：在 name.herokuapp.com 找不到开放端口。