2

I have a nearly-fresh create-react-app project where I've got a simple express server running a test API endpoint:

const express = require('express');
const app = express();

if(process.env.NODE_ENV === 'production') {
  app.use(express.static('build'));
}

const port = process.env.PORT || 5000;

app.get('/api/hello', (req, res) => {
  res.send('Hello From Express');
});

app.listen(port, () => {
  console.log(`Server started at: http://localhost:${port}/`);
});

In package.json I've added a line, "proxy": http://localhost:5000", and it all works fine locally. However when I deploy to Heroku I get 'Invalid Host Header'. How can I change this to work in production?

IronWaffleMan
  • 2,513
  • 5
  • 30
  • 59

2 Answers2

3

This is an old question, but one of the many I came across while dealing with this same issue, so I'm sharing what I've learned and hope it will be useful to others.

A working solution is to use http-proxy-middleware to manually set up the proxy. Please see an explanation here: deploying create-react-app to heroku with express backend returns invalid host header in browser

Here is a minimal working example: https://github.com/sehailey/proxytest and here is that example deployed: https://proxytest2.herokuapp.com/

Sarah Hailey
  • 494
  • 5
  • 19
0

Remove from package.json

"proxy": "http://localhost:8080"

Add a new file in the root folder named .env.development with the contents:

HOST=name.herokuapp.com
Emery Chew
  • 3
  • 2