Angular CLI HTTP 代理云功能配置

Question

Angular CLI 和 http-proxy-middleware 是否可以拦截/代理对外部 URL 的调用，例如 Azure Functions 或 Firebase 函数等无云服务器函数？

例如，针对外部基于云的函数 URL，例如 https://foobar.azurewebsites.net/api/SampleHttpFunction?code=123ABC456XYZ==，您将如何设置 proxy.conf.json 来拦截此 URL/路径？

以下配置确实成功拦截了 HTTP 请求（target 设置为本地运行的云功能 localhost 端口用于开发目的）。 Angular 应用程序使用命令"ng serve --proxy-config proxy.conf.json --open" 启动。

{
  "/api": {
    "target": "http://localhost:1234",
    "secure": false
  }
}

{
  "foobar.azurewebsites.net/api": {
    "target": "http://localhost:1234",
    "secure": false
  }
}

{
  "**/api": {
    "target": "http://localhost:1234",
    "secure": false
  }
}

使用任何这些配置对https://foobar.azurewebsites.net/api/SampleHttpFunction?code=123ABC456XYZ== 的HttpClient 调用仍会转到生产云功能URL，而不是http://localhost:1234/api。

更新：根据我尝试使用 multiple entry configuration 并使用 ng serve --proxy-config proxy.conf.js --open 启动应用程序的建议，但它仍然无法捕获 HTTP 调用：

const PROXY_CONFIG = [{
  context: [
    "/api",
    "**/api",
    "**/api/*",
    "https://foobar.azurewebsites.net/api/",
    "foobar.azurewebsites.net/api/",
    "foobar.azurewebsites.net/api/*",
    "*foobar.azurewebsites.net/api"
  ],
  target: "http://localhost:1234",
  secure: false
}]

module.exports = PROXY_CONFIG;

感谢您提供的任何帮助！

Answer 1

我的应用程序遇到了此类问题，其中拦截仅捕获第一个代理配置。我不得不改用JS 格式的代理。

const PROXY_CONFIG = [{
  context: [
    "/api",
    "foobar.azurewebsites.net/api",
    "**/api"
  ],
  target: "http://localhost:1234",
  secure: false
}];

module.exports = PROXY_CONFIG;

创建一个名为proxy.conf.js 的文件并将package.json 中的proxy.conf.json 替换为js 文件并尝试。