如何确认 Angular App Proxy 工作正常 (v7)

Question

我的 Angluar 应用程序 api 与应用程序在 ng serve 中运行的端口 (:8087) 不同。

我正在尝试获取对 api 的请求，例如：/api/settings 转到 http://localhost:8087/api/settings 而不是 http://localhost:4200/api/settings。

我尝试设置一个代理，如下所示：https://angular.io/guide/build#proxying-to-a-backend-server，但有些东西不起作用，我不太了解它，不知道我应该期待什么。

当我通过http://localhost:8087/api/settings 直接联系 API 时，我得到了预期的响应。

我只使用：ng serve 运行应用程序。

proxy.conf.json:

    {
      "/api/*": {
        "target": "http://localhost:8087",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug"
      }
    }

    [HPM] GET /api/store/categories -> http://localhost:8087
    [HPM] GET /api/store/cart -> http://localhost:8087
    [HPM] GET /api/settings -> http://localhost:8087

浏览器中的网络请求显示为Request URL: http://localhost:4200/api/settings... 但我不确定这是否应该反映不同的端口。应该吗？

Angular CLI：7.0.6 | 节点：8.11.1 | 操作系统：win32 x64 | 角度：7.0.4

实际发生的情况是，我陷入了一个返回另一个的永无止境的循环（这可能是路由的一些问题，但我需要先确认代理是否正常工作）。

Answer 1

尝试将您的配置更改为以下内容：

{
  "/api": {
    "target": "http://localhost:8087",
    "secure": false,
    "logLevel": "debug"
  }
}

您不需要changeOrigin，因为您在此开发设置中的API 也在localhost 上。如果您正在调用某种外部 API，则可能有必要，但当服务器和客户端都在 localhost 上时，则不需要。

回答您关于如何确定它是否有效的问题。从您的组件/服务/等执行对这些相应端点的 API 调用，看看您是否获得了您期望的数据。记录器，即使设置了“调试”级别，也不会显示此信息。浏览器开发者工具网络选项卡不会显示对http://localhost:8087/ 的调用，它会显示http://localhost:4200/。如果您可以从端点接收数据，则表明它可以正常工作。

如果您想增强日志输出以显示完整路径，可以考虑使用http-proxy-middleware events，例如onProxyReq() 和onProxyRes()。

希望对您有所帮助！