ReactJS APP in Heroku “Invalid Host header” HOST configuration?

问题

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.

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.

回答1:

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

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

from the package.json of the client..

Edit July 2019:

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"

Now in the client/ directory install this package:

npm install http-proxy-middleware --save

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:

Option 1:

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

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

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

回答2:

Invalid Host Header has been put in as a solution to DNS Rebinding.

To solve this, you have to create a file named .env.development in the root folder. Inside this file, set

HOST=name.herokuapp.com

From the Documentation: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy

来源：https://stackoverflow.com/questions/49165232/reactjs-app-in-heroku-invalid-host-header-host-configuration

标签

javascript

reactjs

heroku

Webpack

redux