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

Question

我试图将我的React应用程序放到Heroku上。整个项目包括一个API（快速）和一个客户端（ReactJS）。我已经将我的API放在了heroku上。但是，当我将客户放在Heroku上时，它表明构建成功。但是当我打开它时，它显示Invalid Host header。

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

Answer 1

Invalid Host Header已作为DNS 重新绑定的解决方案投入使用。

要解决这个问题，您必须在根文件夹中创建一个名为.env.development的create-react-app文件。在这个文件中，设置

HOST=name.herokuapp.com

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

Answer 2

如果出于任何原因试图在不使用服务器的情况下部署客户端，请确保删除以下内容：

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

来自客户端的package.json。

编辑2019年7月：

Create React App 2.0改变了我们定义代理的方式。要确定您使用的是哪个版本，请检查客户端package.json：大于“ 2.xx”的“ react-scripts”

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

npm install http-proxy-middleware --save

在client / src /目录中创建setupProxy.js文件。无需在任何地方导入该文件，CRA会使用该名称查找文件并进行加载。

有多种添加代理的方法：

选项1：

const proxy = require("http-proxy-middleware");

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

选项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' }));
    };