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

Question

我正在尝试将我的 React 应用程序 放在 Heroku 上。整个项目包括一个 API (express) 和一个客户端 (ReactJS)。我已将我的 API 放在 heroku 上。但是当我把我的客户端放在 Heroku 上时，它显示构建成功。但是当我 打开 它时，它显示 Invalid Host header 。

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

原文由 fourth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

来自客户端的 package.json ..

编辑 2019 年 7 月：

Create React App 2.0 改变了我们定义代理的方式。要确定您使用的是哪个版本，请检查您的客户端 package.json: “react-scripts” greater than “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' }));
    };

回复评论

该代理仅用于开发环境。在 production/Heroku 中，一切都在同一台服务器下运行，因此那里不需要 Proxy。

create-react-app 服务器仅在开发环境中运行，因此当应用程序以 PROD 模式运行时，它仅用于生成将由 Node/Express 服务器提供服务的生产 JS 包。

检查 此其他答案 以了解有关如何使其在生产中工作的问题。

原文由 Roberto Rodriguez 发布，翻译遵循 CC BY-SA 4.0 许可协议