如何在Heroku部署的Angular应用中配置代理？

基本情况 #

• Angular应用与Spring Boot后端均通过Heroku面板创建并托管
• 后端API基础地址：https://my_app.heroku.com/api
• 示例API端点：https://my_app.heroku.com/api/currentUser

前端请求代码 #

Angular中请求后端的示例代码：

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

本地代理配置 #

本地环境下，通过以下配置可将/api/**开头的请求转发至http://localhost:8080，使用ng serve命令时代理完全正常：

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"; // 添加或设置请求头
      res.removeHeader('X-Header-Name'); // 删除响应头
    }
  }
}

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"; // 添加或设置请求头
      res.removeHeader('X-Header-Name'); // 删除响应头
    }
  }
}

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"
    },
// ...

问题现象 #

• 本地ng serve时代理正常，日志截图：
  
• Heroku生产环境执行ng build --production打包部署后，代理完全失效，日志截图：
  

已尝试无效的方案 #

• Heroku官方关于Nginx代理连接SSL后端的指引
• Stack Overflow上Angular部署Heroku后代理路由的相关讨论

内容的提问来源于stack exchange，提问作者Özgür Akıncı