How can a proxy be used in an Angular application on Heroku?

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://my_app.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.

I tried the below guidances but was not successful:

• 
  https://help.heroku.com/YTWRHLVH/ho...oxy-connect-to-a-heroku-app-behind-heroku-ssl
  
  
• 
  Proxy Routing on Angular App deployed on Heroku
  

Continue reading...