angular4拦截器导致重复的http请求

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

Answer 1

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
    });