I have one angular application and one spring boot (backend) application. These applications are hosted as applications created with Heroku dashboard.

Backend api’s base address: https://my_app.heroku.com/api

Example api endpoint: https://my_app.heroku.com/api/currentUser

Here is an example of the request I sent from the Angular application to the spring boot application:

getCurrentUser(): Observable<any> {
  return this.http.get<any>(`/api/users/currentUser`);
}

I can send the above request successfully in my local environment with the following proxy settings. I can redirect requests starting with the address “/api/**” to “http://localhost:8080”.

proxy.prod.conf.js

var winston = require("winston");

function logProvider() {
  return winston.createLogger({
    level: "debug",
    format: winston.format.combine(
      winston.format.splat(),
      winston.format.simple()
    ),
    transports: [new winston.transports.Console()],
  });
}

const PROXY_CONFIG = {
  "/api/**": {
    "target": "https://refque-backend-0c4e8b9dc1b7.herokuapp.com",
    "secure": false,
    "logLevel": "debug",
    "logProvider": logProvider,
    "bypass": function (req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
      req.headers["X-Custom-Header"] = "yes"; // adding oe setting header
      res.removeHeader('X-Header-Name'); //removing header
    }
  }
}

module.exports = PROXY_CONFIG;

proxy.conf.js

const winston = require("winston");

function logProvider() {
  return winston.createLogger({
    level: "debug",
    format: winston.format.combine(
      winston.format.splat(),
      winston.format.simple()
    ),
    transports: [new winston.transports.Console()],
  });
}


const PROXY_CONFIG = {
  "/api/**": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "logProvider": logProvider,
    "bypass": function (req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
      req.headers["X-Custom-Header"] = "yes"; // adding oe setting header
      res.removeHeader('X-Header-Name'); //removing header
    }
  }
}

module.exports = PROXY_CONFIG;

angular.json

...
...
...
"serve": {
   "builder": "@angular-devkit/build-angular:dev-server",
     "configurations": {
        "production": {
           "browserTarget": "refque:build",
              "proxyConfig": "src/proxy.prod.conf.js"
           },
           "development": {
              "browserTarget": "refque:build:development",
              "proxyConfig": "src/proxy.conf.js"
           }
        },
          "defaultConfiguration": "development"
    },
...
...
...

When I run it with the “ng serve” command in the local environment, the proxy works as I want, but in the Heroku prod environment, the proxy does not work because the “ng build –production” command runs instead of “ng serve“.

Local log (successful proxy):

Heroku log(unsuccessful proxy)

I hope I was clear enough.

https://help.heroku.com/YTWRHLVH/how-do-i-make-my-nginx-proxy-connect-to-a-heroku-app-behind-heroku-ssl

Proxy Routing on Angular App deployed on Heroku

I tried the above guidances but was not successful.