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