¿Cómo enviar “Cookie” en el encabezado de la solicitud para todas las solicitudes en Angular2?

Solución:

Supongo que hay una fase en la que le pides al servidor que te autentique. Después de esto (y si la autenticación es exitosa), el servidor devolverá una cookie en la respuesta. El navegador almacenará esta cookie y la enviará nuevamente para cada llamada.

Dicho esto, en el caso de solicitudes de dominio cruzado (CORS), debe configurar el withCredentials de XHR a true para que el navegador agregue cookies en sus solicitudes.

Para habilitar esto con Angular2, necesitamos extender el BrowserXhr clase como se describe a continuación:

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.withCredentials = true;
    return <any>(xhr);
  }
}

y anular el BrowserXhr proveedor con el extendido:

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

Consulte estas preguntas para obtener más detalles:

• Establecer cookie en respuesta no configurada para la solicitud de publicación de Angular2
• xmlhttprequest y set-cookie & cookie

Editar (siguiendo el comentario del monstruo)

Desde RC2, puede utilizar el withCredentials propiedad directamente dentro de la configuración de la solicitud como se describe a continuación:

this.http.get('http://...', { withCredentials: true })

Editar (siguiendo el [maxou] comentario)

Recuerde incluir con Credenciales: verdadero en cada solicitud.

En Angular5 puedes escribir un interceptor Http:

auth.interceptor.ts

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      withCredentials: true
  });
  return next.handle(request);
  }
}

Y agregue a la matriz de proveedores de módulo de aplicación

app.module.ts

import { AuthInterceptor } from './services/auth.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
imports: [
    BrowserModule,HttpClientModule,FormsModule
  ],

providers: [
    {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true,
    }
]

---

---

Utiliza Nuestro Buscador