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 选项时，问题就解决了，但是我首先创建了拦截器来添加授权 header。请帮助我了解问题所在

Answer 1

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

编辑

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

尝试以下方法

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

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

angular4 interceptor causes duplicated http requests

interceptor

angular