Como enviar “Cookie” no header da solicitação para todas as solicitações no Angular2?

Na verdade, nosso back-end autentica a solicitação usando Cookie no header da solicitação. Eu sei que vai recusar se eu definir um header “Cookie”. Então, existe uma maneira de enviar um cookie para o back-end?

Eu acho que há uma fase em que você pede ao servidor para autenticá-lo. Após isso (e se a autenticação for bem-sucedida), o servidor retornará um cookie na resposta. O navegador armazenará esse cookie e o enviará novamente para cada chamada.

Dito isso, no caso de solicitações de vários domínios (CORS), você precisa definir o withCredentials de XHR como true para que o navegador adicione cookies em suas solicitações.

Para habilitar isso com o Angular2, precisamos estender a class BrowserXhr conforme descrito abaixo:

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

e replace o provedor BrowserXhr com o estendido:

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

Veja estas perguntas para mais detalhes:

  • Set-cookie em resposta não definida para postar Angular2
  • xmlhttprequest e set-cookie & cookie

Edit (seguindo o comentário do freaker )

No RC2, você pode usar a propriedade withCredentials diretamente na configuração da solicitação, conforme descrito abaixo:

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

Editar (seguindo o comentário [maxou])

Lembre-se de include withCredentials: true em todos os pedidos .

Em Angular5 você pode escrever um 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 adicione a matriz de provedores de 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, } ]