AngularJS: 401 - Несанкционированный: HttpInterceptor с базовой аутентификацией

Question

Я хочу позвонить в Rest-Service (Spring MVC), чтобы получить список релизов. На стороне клиента (AngularJs) я использую сервис, создающий вызов HttpClient. У меня также есть зарегистрированный HttpInterceptor для использования простой базовой аутентификации. Перехватчик предоставляется в app.modules.ts, а вызывается во время остального вызова .

К сожалению, я получаю код состояния 401 и не могу найти запись «Аутентификация» в заголовке. Чего не хватает?

Перехватчик:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class BasicAuthInterceptor implements HttpInterceptor {


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

  request = request.clone({
    setHeaders: {
      Authorization: `Basic username:password`
    },
  }); 


  return next.handle(request);
  }
}

Класс обслуживания:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs/';
import { HttpClient } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
import { Release } from './Release';

@Injectable()
export class ReleasesService {

  constructor(
    private http: HttpClient) {}

  private releasesUrl = 'http://localhost:8080/releases/showAll';

  getReleases(): Observable<Release[]> {
    return this.http
      .get<Release[]>(this.releasesUrl)
      .pipe( tap(releases => this.log('fetched releases')),
         catchError(this.handleError('getReleases', [])));
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error); // log to console instead
      return of(result as T);
   };
  }

  private log(message: string) {
    console.info(message);
  }
}

app.modules.ts

  providers: [
      APP_PROVIDERS,
     { provide: HTTP_INTERCEPTORS, useClass: BasicAuthInterceptor, multi: true },
  ],

Answer 1

Я нашел решение.

Установка заголовка была правильной.Но мне пришлось добавить следующий параметр в вызов HttpClient: {withCredentials: true}

getReleases(): Observable<Release[]> {
return this.http
  .get<Release[]>(this.releasesUrl, { withCredentials: true })
  .pipe( tap(releases => this.log('fetched releases')),
     catchError(this.handleError('getReleases', [])));

}

Затем учетные данные передаются на сервер.