Angular 6 HTTPClient: Request fired once, receives 2 responses

Question

I've refactored an old project (Angular 2) to Angular 6. All works well, besides a problem I have with api calls. On the sign-in component, when I submit the form, fires a POST request with the data and the interceptor adds certain headers (for now only content-type). Code on submitting the form:

this.authService.signIn(this.account)
        .subscribe( res => {
          console.log('RES -> ', res);
          this.router.navigate([this.returnUrl]);
        },
          err => console.log(err));

AuthService methods:

 signIn(account: Account) {
    const req = new HttpRequest(HttpMethods.Post, AuthService.signInUrl,{account: account});
    return this.makeRequest(req);
   }

private makeRequest(req: HttpRequest<any>): Observable<any> {
    this.progressBarService.availableProgress(true);
    return this.http.request(req)
        .finally( () => this.progressBarService.availableProgress(false));
  }

The console.log I've added is fired twice for some reason: the first time is {type: 0}, and second time returns the data I needed. I've removed everything from interceptor, leaved only next.handle(req) and it does the same. Any idea why I receive 2 responses, the first being just {type: 0}?

Answer 1

That's because you using this.http.request(). I guess the first response is actually the response for the OPTIONS request.

If you still insist to use this.http.request(), for example if you using it to upload files, you might need to use rxJs takeLast(1) to get the response that you need.

Here's the reference. https://angular.io/api/common/http/HttpClient#request