Question

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

例如，定位基于外部云的功能网址，例如https://foobar.azurewebsites.net/api/SampleHttpFunction?code=123ABC456XYZ==，您如何设置proxy.conf.json来拦截此网址/路径？

以下配置成功拦截了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
  }
}

HttpClient使用这些配置调用https://foobar.azurewebsites.net/api/SampleHttpFunction?code=123ABC456XYZ==仍然会转到生产云功能网址，而不是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的文件，并将proxy.conf.json中的package.json替换为js文件并尝试。

Angular CLI HTTP代理云功能配置

1 个答案: