基本身份验证标头未在 Angular GET 请求中发送

Question

我有一个具有基本身份验证安全性的 Spring Boot Angular 应用程序。 当我在浏览器中打开 URL 时，会显示原生浏览器 Basic Auth 窗口提示，我可以在其中输入 Basic Auth 信息。

问题是浏览器没有通过 GET-Request 将 Basic Auth 信息发送到后端。

谁能解释为什么没有发送来自浏览器的基本身份验证信息？

一般请求信息

Request URL: https://127.0.1.1:31000/my-application/rest/profile/
Request Method: GET
Status Code: 500 
Remote Address: 127.0.1.1:31000
Referrer Policy: no-referrer-when-downgrade

请求标头

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: 127.0.1.1:31000
Referer: https://127.0.1.1:31000/my-application/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/72.0.3626.121 Chrome/72.0.3626.121 Safari/537.36

响应标头

Access-Control-Allow-Origin: *
cache-control: no-cache, no-store, max-age=0, must-revalidate
connection: close
content-type: application/json
date: Mon, 18 Mar 2019 07:51:49 GMT
expires: 0
pragma: no-cache
strict-transport-security: max-age=31536000 ; includeSubDomains
transfer-encoding: chunked
x-content-type-options: nosniff
X-Powered-By: Express
x-xss-protection: 1; mode=block

使用的 Angular 服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ProfileDTO } from './profile-dto';
import { Observable } from 'rxjs';

const profilesUrl = './rest/profile/';

@Injectable({
    providedIn: 'root'
})
export class ProfilService {
    constructor(private httpClient: HttpClient) {}

    fetchAllProfiles(): Observable<ProfileDTO[]> {
        return this.httpClient.get<ProfileDTO[]>(profilesUrl);
    }
 }

编辑

问题不是我无法获取响应头，问题是授权头没有随请求一起发送。

我可以将基本身份验证信息与请求一起发送，例如使用拦截器：

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

@Injectable()
export class AuthorizationHttpInterceptor implements HttpInterceptor {

    constructor() {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        request = request.clone({
            setHeaders: {'Authorization': 'Basic dXNlcm5hbWU6cGFzc3dvcmQ='}
        });
        return next.handle(request);
    }
}

使用拦截器一切正常。授权头被发送到后端。

但问题是我不知道如何从本机浏览器基本身份验证提示中获取基本身份验证信息。

谁能告诉我如何从浏览器基本身份验证提示中获取基本身份验证信息？

我其实以为Authorization Header是浏览器添加的……

Answer 1

基本身份验证使用用户名/电子邮件和密码进行塑造，具体取决于服务器凭据。 你可以这样尝试

const basicAuth = username + ':' + password;
let Headers = new HttpHeaders();
Headers = Headers.append('Authorization', 'Basic ' + btoa(basicAuth));
return this.dataService.post<any>(URL, null, { headers: Headers })...

Answer 2

简单的服务发送标头

导出类 ProfilService { 构造函数（私有 httpClient: HttpClient）{}

fetchAllProfiles(token): Observable<ProfileDTO[]> {

    let headers = new HttpHeaders().set('Content-Type', 'application/json');
        headers = headers.set('Authorization', 'Bearer ' + token);

            return this._httpClient.get('your-api', {params: httpParams, headers: headers})
          .map((response: ProfileDTO[]) => response);
      }

} }