Как отправить "Cookie" в заголовок запроса для всех запросов в Angular2?

Ответ 1

Я предполагаю, что есть фаза, на которой вы попросите сервер аутентифицировать вас. После этого (и если аутентификация будет успешной), сервер вернет файл cookie в ответ. Браузер сохранит этот файл cookie и отправит его для каждого вызова.

Тем не менее, в случае кросс-доменных запросов (CORS) вам нужно установить withCredentials XHR на true, чтобы браузер добавлял файлы cookie в ваши запросы.

Чтобы включить это с помощью Angular2, нам необходимо расширить класс BrowserXhr, как описано ниже:

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

и переопределить поставщика BrowserXhr с расширенным:

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

См. вопросы для получения дополнительной информации:

• Set-cookie в ответе не установлен для Angular2 post request
• xmlhttprequest и set-cookie и файлы cookie

Изменить (в соответствии с комментарием freaker)

В RC2 вы можете использовать свойство withCredentials непосредственно в конфигурации запроса, как описано ниже:

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

Изменить (после комментария [maxou])

Не забудьте включить withCredentials: true в каждый запрос.

Ответ 2

В Angular5 вы можете написать Http Interceptor:

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);
  }
}

И добавить в провайдеры массив 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,
    }
]