问Heroku“无效主机标题”主机配置中的ReactJS应用程序？

EN

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

"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

在客户端/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中，所有的东西都运行在同一台服务器上，所以不需要代理。

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

有关如何使其在生产中工作的问题，请查看this other answer。

作为DNS Rebinding的一种解决方案，Invalid Host Header已经投入使用。

要解决此问题，您必须在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