Basic Auth header not sent on Angular GET request

Question

I have a Spring Boot Angular application with Basic Auth security. When I open the URL in the browser, the native browser Basic Auth window prompt is displayed where I can enter the Basic Auth information.

The problem is that the browser does not send the Basic Auth information to the backend with the GET-Request.

Can anyone explain why the basic auth info from the browser is not sent?

General Request info

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

Request headers

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

Response headers

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 Service that is used

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);
    }
 }

EDIT

The problem is not that I can't get the reponse headers, the problem is that the Authorization header is not sent with the request.

I could send the basic auth info with the request for example with a interceptor:

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);
    }
}

With the interceptor everything works fine. The authorization header is sent to the backend.

But the problem is that I don't know how to get the basic auth info from the native browser basic auth prompt.

Can anyone tell me how to get the basic auth info from the browser basic auth prompt?

I actually thought that the Authorization Header is added by the browser...

Answer 1

Basic Auth is shaped using username/email and password, that depending on server credential. you can trying like this

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

simple service send header

export class ProfilService { constructor(private 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);
      }

} }