Come inviare “Cookie” nell’intestazione della richiesta per tutte le richieste in Angular2?

In realtà, il nostro backend autentica la richiesta utilizzando Cookie nell’intestazione della richiesta. So che rifiuterà se imposto un header “Cookie”. Quindi, c’è un modo per inviare un cookie al back-end?

Immagino che ci sia una fase in cui chiedi al server di autenticarti. Seguendo questo (e se l’autenticazione ha esito positivo), il server restituirà un cookie nella risposta. Il browser memorizzerà questo cookie e lo invierà di nuovo per ogni chiamata.

Detto questo, nel caso di richieste cross domain (CORS), è necessario impostare withCredentials di XHR su true per fare in modo che il browser aggiunga cookie nelle richieste.

Per abilitare questo con Angular2, dobbiamo estendere la class BrowserXhr come descritto di seguito:

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

e sostituisci il provider BrowserXhr con l’estensione:

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

Vedi queste domande per maggiori dettagli:

  • Set-cookie in risposta non impostato per richiesta post Angular2
  • xmlhttprequest e set-cookie e cookie

Modifica (seguendo il commento del freaker )

Da RC2, è ansible utilizzare la proprietà withCredentials direttamente all’interno della configurazione della richiesta come descritto di seguito:

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

Modifica (seguendo il [maxou] commento)

Ricordati di includere conCredentials: true su ogni richiesta .

In Angular5 puoi scrivere 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, next: HttpHandler): Observable> { request = request.clone({ withCredentials: true }); return next.handle(request); } } 

E aggiungi alla matrice di fornitori di app.module

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, } ]