Deploying React Express and Node app to Heroku Proxy Error

Question

I have successfully in the past launched full stack applications to Heroku by using within the client package.json file.

"proxy": "http://localhost:3001"

Now I am getting an "Invalid Host header" I did fix that error by removing the proxy as well as implementing setupProxy.js file with the following code, but afterwards the app does not call the back end at all and errors out.

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};

I'm wondering how to fix, or if anything changed recently in Heroku to not allow proxy within the client package.json file?

There is no good reason to run two webservers (frontend and backend) in production deployment on Heroku. Although common, this is still wrong. You only need both servers during development, presumably done before Heroku deployment. So deploy only one server (backend) to Heroku and then you don't need a proxy. See this project as an example. — winwiz1

kima111 kima111 · Accepted Answer · 2020-04-13T22:44:47

It looks like it was a seemingly unrelated fix. I had to enter in some environment variables within Heroku to allow the server to run. Without the variables, I believe the server would stop with errors therefore trickling down and causing many problems. So long story short, always remember your environment variables within Heroku.

Deploying React Express and Node app to Heroku Proxy Error

1 Answers