AngularJS: 401 - Unauthorized: HttpInterceptor with Basic Auth - angularjs

Question

I want to call a Rest-Service (Spring MVC) to receive a list of releases. On client side (AngularJs) I use a service creating a HttpClient call. I also have a registered HttpInterceptor to use simple Basic Authentification. The interceptor is provided in app.modules.ts and is called during the rest call.
Unfortunately I get statuscode 401 and I cannot find the 'Authentification' entry in the header. What is missing?
Interceptor:
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);
}
}
Service class:
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

I found the solution.
Setting the header was correct. But I had to add following parameter to the HttpClient-call: { 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', [])));
}
Then the credentials are passed to the server.