angular4 interceptor causes duplicated http requests

Question

Here is my interceptor

// src/app/auth/token.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpErrorResponse,
  HttpInterceptor
} from '@angular/common/http';
import { JwtService } from '@app/services/jwt.service';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  constructor(public jwtService: JwtService) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headersConfig = {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    };

    if (this.jwtService.getToken()) {
      headersConfig['Authorization'] = `Bearer ${this.jwtService.getToken()}`;
    }

    request = request.clone({
      setHeaders: headersConfig
    });
    return next.handle(request).do((event: HttpEvent<any>) => {

    }, (err: any) => {

    });
  }
}

and my app.module, everything like in documentation

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes
      , { preloadingStrategy: PreloadAllModules }
    ),
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyInterceptor,
      multi: true
    },
    JwtService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This causes duplicated http requests

I found that when I remove setHeaders option, the problem is fixed, but I created intercepter to add authorization header in the first place. Please help me to understand what's wrong

what's weird, it's call first http (the call initialized by zonejs), waits until it's done and then call the second one — Victor Bredihin
– Victor Bredihin, Commented Nov 30, 2017 at 22:54
these are not duplicate requests, the first is a preflight options request validating that you are authorized to make requests on this domain, it's happening because you're adding auth headers, this is standard browser behavior. — bryan60
– bryan60, Commented Nov 30, 2017 at 23:00
@bryan60 so, it is the correct behavior that I see 2 http requests, when add any header? in my example I don't have auth header, cause there is no jwt token — Victor Bredihin
– Victor Bredihin, Commented Nov 30, 2017 at 23:28
yea pretty much any header alteration will trigger a pre flight request, it causes no performance issues whatsoever, and happens in every browser. Most of the time the request is actually browser cached. — bryan60
– bryan60, Commented Dec 1, 2017 at 0:56
@bryan60 thank you, so I thing I do nothing wrong. But I'm working not the first year, and never seen this behavior before. I would say it's not so usual behavior, since before I start using interceptor there was no these OPTIONS requests — Victor Bredihin
– Victor Bredihin, Commented Dec 1, 2017 at 9:50

Hugo Noro · Accepted Answer · 2017-11-30 23:19:37Z

3

When you have an authenticated request initially there is one request of the type OPTIONS that is done during the called preflight. It’s a kind of handshake with the server figuring out if it accepts requests of that type. If all goes OK it will then do the actual GET, POST, etc. request you initially did. I believe that’s what you’re experiencing.

Edit

Your problem might reside in the way you are setting the headers.

Try the following

request = request.clone({
      headers: headersConfig
    });

edited Nov 30, 2017 at 23:19

answered Nov 30, 2017 at 23:02

Hugo Noro

3,2732 gold badges17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Victor Bredihin Over a year ago

so, it is the correct behavior that I see 2 http requests, when add any header? in my example I don't have auth header, cause there is no jwt token

Hugo Noro Over a year ago

My edit was based on this source. Have a look and see if you can spot something you’re doing differently juristr.com/blog/2017/08/intercept-http-requests-in-angular

Victor Bredihin Over a year ago

yea, I checked this one and many other links before asking. I'm more interested in you original answer, can u give me some link about this behavior? You said it's ok, but for me it looks like 2 requests need more time then without interceptor, before that I was using custom apiService instead of interceptor for the same goal, and there was no this problem. So, I kind of doubt that this duplicated request is fine

Hugo Noro Over a year ago

Can you check the type of request? I’m suspecting one of them is of the type HEAD and the other of the type GET or POST or whatever was the original type.

Victor Bredihin Over a year ago

one of them with type 'OPTIONS'

|

Collectives™ on Stack Overflow

angular4 interceptor causes duplicated http requests

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related