如何在开发期间为我的 angular 应用程序创建后端代理？

Question

我正在尝试确保对“api”路径内的 URL 的每个浏览器调用都重定向到另一个（开发）服务器。

所以这意味着当我的 angular 应用请求时：

https://localhost:4200/api/some/feature --> https://localhost:7276/api/some/feature 应该请求

这必须获取 /api 的所有子文件夹，并转发 GET 属性。

我发现这个文档似乎完全符合我的要求。

我创建了 proxy.config.json：

{
  "/api/*": {
    "target": "https://localhost:7276/",
    "secure": "true",
    "logLevel": "debug"
  }
}

修改了 angular.json：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "web:build:production"
    },
    "development": {
      "browserTarget": "web:build:development",
      "proxyConfig": "proxy.config.json"
    }
  },
  "defaultConfiguration": "development"
},

并重新启动一切：

ng serve

现在，当我的 angular 服务尝试请求/api/dashboard时，它仍然失败。

在浏览器上，我收到以下错误：

 GET http://localhost:4200/api/dashboard/ 504 (Gateway Timeout)

给定值出现第二个错误：

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null
    },
    "status": 504,
    "statusText": "Gateway Timeout",
    "url": "http://localhost:4200/api/dashboard/",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for http://localhost:4200/api/dashboard/: 504 Gateway Timeout",
    "error": "Error occurred while trying to proxy: localhost:4200/api/dashboard/"
}

在我的ng serve控制台中，我得到了这个：

<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/dashboard/ to https://localhost:7276/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

我的理解是它会将与 /api/* 匹配的任何内容返回到相同的 URL，而不是再次添加相同的初始子路径？

我找不到如何更改主机，知道如何执行此操作吗？

Answer 1

您是否在本地主机的端口 7276 上运行开发服务器？..