AngularJS：401 - 未经授权：具有基本身份验证的HttpInterceptor

Question

我想调用Rest-Service（Spring MVC）来接收发布列表。在客户端（AngularJs），我使用一个创建HttpClient调用的服务。我还有一个注册的HttpInterceptor来使用简单的Basic Authentification。拦截器在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', [])));

}

然后将凭据传递给服务器。