Угловой 2 http с учетными данными

Question

Я пытаюсь использовать withCredentials для отправки файла cookie в мой сервис, но не могу выяснить, как его реализовать. Документы говорят: "Если серверу требуются учетные данные пользователя, мы включим их в заголовках запросов". Без примеров. Я пробовал несколько разных способов, но он все равно не будет отправлять мои куки. Вот мой код до сих пор.

private systemConnect(token) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('X-CSRF-Token', token.token);
    let options = new RequestOptions({ headers: headers });
    this.http.post(this.connectUrl, { withCredentials: true }, options).map(res => res.json())
    .subscribe(uid => {
        console.log(uid);
    });
}

Answer 1

Попробуйте изменить свой код следующим образом

let options = new RequestOptions({ headers: headers, withCredentials: true });

а также

this.http.post(this.connectUrl, <stringified_data> , options)...

как видите, вторым параметром должны быть данные для отправки (используя JSON.stringify или просто '') и все варианты в одном третьем параметре.

Answer 2

Начиная с Angular 4.3, были представлены HttpClient и Interceptors.

Быстрый пример показан ниже:

@Injectable()
export class WithCredentialsInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        request = request.clone({
            withCredentials: true
        });

        return next.handle(request);
    }
}

constructor(
      private http: HttpClient) {

this.http.get<WeatherForecast[]>('api/SampleData/WeatherForecasts')
    .subscribe(result => {
        this.forecasts = result;
    },
    error => {
        console.error(error);
    });

Answer 3

Создание Interceptor было бы неплохо внедрить материал в заголовок приложения. С другой стороны, если вы ищете быстрое решение, которое нужно сделать на уровне запроса, попробуйте установить withCredentials в true как показано ниже

const requestOptions = {
 headers: new HttpHeaders({
  'Authorization': "my-request-token"
 }),
 withCredentials: true
};

Answer 4

Вот решение для Angular 17 с использованием перехватчика:

credential.interceptor.ts

      import { HttpInterceptorFn } from '@angular/common/http';

export const credentialsInterceptor: HttpInterceptorFn = (request, next) => {
  const modifiedRequest = request.clone({
    withCredentials: true
  });
  return next(modifiedRequest);
};

app.config.ts

      import { ApplicationConfig } from '@angular/core';

import { provideHttpClient,
         withFetch,
         withInterceptors } from '@angular/common/http';

import { credentialsInterceptor } from './credentials.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideHttpClient(withFetch(), withInterceptors([credentialsInterceptor])),
  ]
};