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

Question

这是我的拦截器

// 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) => {

    });
  }
}

和我的app.module，文档中的所有内容

@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 { }

这会导致重复的http请求

我发现当我删除setHeaders选项时，问题已修复，但我创建了截取器以首先添加授权标头。请帮我理解什么是错的

Answer 1

当您最初有一个经过身份验证的请求时，在调用预检期间会有一个OPTIONS类型的请求。这是与服务器的一种握手，确定它是否接受该类型的请求。如果一切顺利，它将执行您最初做的实际GET，POST等请求。我相信这就是你所经历的。

修改

您的问题可能在于设置标头的方式。

尝试以下

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