Angular 10 --proxy.conf 没有将请求重定向到目标答案

【问题标题】：Angular 10 --proxy.conf not redirecting requests to targetAngular 10 --proxy.conf 没有将请求重定向到目标
【发布时间】：2020-10-14 22:42:07
【问题描述】：

要么我错过了什么，要么--proxy-configuration 不再正常工作。我正在尝试使用http://localhost:56209/api/authenticate/login，但它似乎不起作用。 Postman 的所有请求都可以正常工作。

调试日志显示请求实际上被重定向，但 Chrome 控制台告诉我不是这样。

10% building 3/3 modules 0 active [HPM] Proxy created: /api  ->  http://localhost:56209/
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]

chunk {main} main.js, main.js.map (main) 610 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 566 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.49 MB [initial] [rendered]
Date: 2020-10-14T22:31:04.463Z - Hash: 5dd334fd8f37fa963b18 - Time: 11697ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
[HPM] POST /api/authenticate/login -> http://localhost:56209/

Chrome console error

Request URL: http://localhost:4200/api/authenticate/login
Request Method: POST
Status Code: 400 Bad Request
Remote Address: 127.0.0.1:4200
Referrer Policy: strict-origin-when-cross-origin

我已经删除了node_modules 清除了缓存，甚至创建了一个尝试使用公共 API 的新项目 - 结果仍然相同。

下面是有关此行为的一些关键信息

const headers = new HttpHeaders().set('Content-Type','application/json');
    const jsonifiedLoginRequest = JSON.stringify(loginRequest);
    this.http.post<LoginResponse>("/api/authenticate/login", jsonifiedLoginRequest, {headers: headers}).subscribe(x => {
      console.log(x);
    });

ng --version
Angular CLI: 10.1.4
Node: 12.18.4
OS: win32 x64

Angular: 10.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.4
@angular-devkit/build-angular   0.1001.4
@angular-devkit/core            10.1.4
@angular-devkit/schematics      10.1.4
@angular/cdk                    10.2.4
@angular/flex-layout            10.0.0-beta.32
@angular/material               10.2.3
@schematics/angular             10.1.4
@schematics/update              0.1001.4
rxjs                            6.6.3
typescript                      4.0.3

src/proxy.conf.json

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

显然我也尝试过/api/*，但无济于事。

angular.json (only the serve part)

  "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "SageFrontend:build",
            "proxyConfig": "src/proxy.conf.json"
          }

感谢您的帮助！

【问题讨论】：

你也试过/api/*吗？
是 - 无济于事

标签： javascript node.js angular typescript proxy

【解决方案1】：

奇怪的是，这不起作用的原因是因为在 POST 中发送的有效负载看起来像这样

{ "UserName" : "", "Password" : "" }

如果我发送一个包含适当值的请求，例如

{ "UserName" : "test", "Password" : "somePassword!1111!" }

The proxy manages to divert the call properly. 

I have no idea why this is happening.

编辑： chrome 控制台中的错误消息诱使我相信错误实际上来自 angular 网络服务器。如果您在错误树中进一步向下导航，您会看到服务的实际响应包含在 Angular 服务器的错误中。

【讨论】：