ReactJS APP in Heroku "Invalid Host header" HOST configuration?

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 { createProxyMiddleware } = require('http-proxy-middleware');

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

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

Answering to comments

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 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.

Check this other answer for questions on how to make it work in production.

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 create-react-app root folder. Inside this file, set

HOST=name.herokuapp.com

From the Documentation:https://create-react-app.dev/docs/proxying-api-requests-in-development/#invalid-host-header-errors-after-configuring-proxy