Trying to deploy React app on heroku. App's api works fine locally but when I deploy to heroku the api doesn't work

Question

I am using Node+Express for my back-end. At first I tried using "proxy": http://localhost:3001 in the react client's package.json but that caused an Invalid Host Header message when I tried to open my site on heroku.

I followed these insturctions which then lead me to using http-proxy-middleware which is where I am at.

This is my setupProxy.js which sits on /src in my app.

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

module.exports = function(app) {
  app.use('/api/*', proxy({
    target: 'https://safe-crag-59591.herokuapp.com',
    changeOrigin: true,
    logLevel: 'debug',
    router: {
      'localhost:3000': 'http://localhost:3001'
    }
  }));
};

When I deploy it to heroku the front-end works fine. But when I try to make any api call I receive HTTP 400 error messages. The request headers look fine (ex/ header: https://safe-crag-59591.herokuapp.com/api/getAllProduct) but when I try to use any of the routes in Postman I am hit with the same error.

Here is an example of the error in the heroku logs:

at=info method=GET path="/api/getAllProduct" host=safe-crag-59591.herokuapp.com request_id=e1455e5b-91fc-418b-a379-98af1012f3d7 fwd="72.207.123.175, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72, 54.146.242.72,54.146.242.72" dyno=web.1 connect=2ms service=4213ms status=400 bytes=2757 protocol=https

I am fairly new to this so I am sure there is something I am missing but I feel like I have tried everything.

EDIT: I forgot to add when the server is ran and it sets up the proxy it displays this message in the console: [HPM] Proxy created: / -> https://safe-crag-59591.herokuapp.com when I think it should be this based on my setupProxy.js [HPM] Proxy created: /api -> https://safe-crag-59591.herokuapp.com But again this is still fairly new to me. Just the other ways I tried setting up my setupProxy.js when the proxy would set up the console would display '/api'.