1

Mi duda es la siguiente usando el interceptor de angular para enviar el token en cada petición a mi back-end veo que realiza dos peticiones una sin agregar el token y otra con el token, mi pregunta es esto es normal ya que mi respuesta efectivamente me devuelve una sola pero al revisar mi consola veo que realiza dos peticiones, esto es por el clone de angular ? esto puede afectar el rendimiento ?introducir la descripción de la imagen aquí

Codigo de mi app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AuthInterceptorService } from './services/auth.interceptor.service';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './modules/router.module';

import { PrincipalComponent } from './components/principal/principal.component';
import { NotFoundComponent } from './components/errors/not.found.component';
import { LoginComponent } from './components/auth/login.component';


@NgModule({
  declarations: [
    AppComponent,
    PrincipalComponent,
    NotFoundComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

auth.interceptor.service.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthInterceptorService implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const request = req.clone({
            setHeaders: {
                Authorization: `Bearer ${localStorage.getItem('token')}`
            }
        });

        return next.handle(request);
    }
}

1 respuesta 1

1

La primera petición es con el método OPTIONS para comprobar que el recurso que se quiere solicitar está disponible, Angular lo hace por defecto por ti.

Fuente HTTP Métodos

La segunda petición es la tuya una vez Angular ha comprobado que el recursos solicitado está disponible.

1
  • Pero esto no ocurre cuando uso la librería http sola pero cuando implemento el interceptor aparece la petición OPTIONS, este comportamiento es normal en angular o e realizado alguna operación erronea ? el 21 ene. 2018 a las 21:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.