Angular 10 —proxy.conf не перенаправляет запросы на цель

#javascript #node.js #angular #typescript #proxy

#javascript #node.js #angular #typescript #прокси

Вопрос:

либо я что-то пропустил, либо --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

 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"
          }
  

Спасибо за любую помощь!

Комментарии:

1. Вы тоже пробовали /api/* ?

2. Да — безрезультатно

Ответ №1:

Как ни странно, причина, по которой это не сработало, заключается в том, что полезная нагрузка, отправленная в сообщении, выглядела так

 { "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.