Heroku中的"ReactJS APP"“无效的主机标头"主机配置? [英] ReactJS APP in Heroku "Invalid Host header" HOST configuration?

问题描述

我正在尝试将反应应用放在Heroku上.整个项目包括一个API(Express)和一个客户端(ReactJS).我已经将我的API放在了heroku上.但是，当我将客户放在Heroku上时，它表明构建成功.但是，当我打开时，它显示为Invalid Host header.

I am trying to put my React app on the Heroku. The whole project include one API (express) and one client (ReactJS). I have put my API on heroku. But when I put my client on Heroku, it shows build succeeded. But when I open it, it shows Invalid Host header.

我用Google搜索这个问题，许多人告诉我配置主机.但是他们正在使用webpack.我用create-react-app构建它，然后用npm start运行它.我想知道如何以最简单的方式解决这个问题.谢谢.

I google this problem and many people tell me to configure the HOST. But they are using webpack. I build this with create-react-app and I run it by npm start. I want to know how to solve this problem in most easy way. Thanks.

推荐答案

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

If for any reason you were trying to deploy the client without the server, make sure to remove the:

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

来自客户端的package.json.

from the package.json of the client..

2019年7月

Edit July 2019:

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

Create React App 2.0 has changed how we define Proxies. To determine which version you are using, check your client side package.json: "react-scripts" greater than "2.x.x"

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

Now in the client/ directory install this package:

npm install http-proxy-middleware --save

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

Create setupProxy.js file in client/src/ directory. There is no need to import this file anywhere, CRA looks for a file by this name and loads it.

有多种添加代理的方法:

There are different ways to add proxies:

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

正在回答评论

Answering to comments

此代理仅在开发环境中使用.在生产/Heroku中，所有内容都在同一服务器上运行，因此那里不需要代理.

This proxy is just used in development environment. In production/Heroku everything runs under the same server, so there is not need for Proxy there.

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

create-react-app server just runs in Dev environment, so when the application is run in PROD mode, it is just used to generate the production JS bundle that will be served by the Node/Express server.

请检查此其他答案，其中我解释了使其工作所需的条件在生产中.

Please check this other answer where I explain what is needed to make it work in production.

这篇关于Heroku中的"ReactJS APP"“无效的主机标头"主机配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！