Angular HttpClient authorization header created but disappearing

Question

Problem

I am trying to send Request Headers, specifically, an authorization header. The authorization Header should look something like this: Authorization: Basic NTY2MTI0Og== In a list of headers. Where Basic indicates that it is encoded with base64.

I'm positive it does get added to the get request made in Angular:

Although I'm not sure what op is.

This is what it should look like(from the standard Datasnap Delphi project):

This is what mine look like:

As you can see, the Authorization header is missing.

Errors

Console Error:

Fiddler Raw request:

This is how I create the Rest call:

public authRestCall(auth: string): Observable<string> {
  var headers = new HttpHeaders;
  //HttpHeaders is immutable
  headers = headers.append('Authorization', 'Basic ' + auth);
  return this.http.get<string>(this.localUrl + 'DSAdmin/GetPlatformName', {headers: headers});
}

---

Alternative

another way I tried doing this was to create an object like this, described in the Angular guide

const httpOptions = {
  headers: new HttpHeaders({
  'Authorization': 'NTY2MTI0OnVuZGVmaW5lZA=='
  })
};

which I would then add like this:

return this.http.get<string>(this.localUrl + 'DSAdmin/GetPlatformName', httpOptions;

---

Delphi

In the backend server (A Delphi datasnap module) I have configured CORS like this:

Response.setCustomHeader('Access-Control-Allow-Origin','*');
Response.SetCustomHeader('Access-Control-Allow-Headers','*');
Response.SetCustomHeader('Access-Control-Allow-Methods','*');

---

Versions

`- Angular 5

• ionic-angular: 3.9.2
• List item
• Delphi RAD studio 10.1 Berlin`

---

Sources that did not solve it for me

Angular 4.3 HTTPClient Basic Authorization not working

Angular HttpClient not setting Authorization header

Angular 4.3 HttpClient doesn't send Authorization header

Adding “Authorization” header in get request

I have checked many more questions, but none of them helped me solve the problem. I've been stuck on this for almost a week now. Maybe I'm not understanding something correctly, but it is not working.

If something is not clear or if I should add more info about something, please let me know. Thank you for reading.

---

Screenshosts as text

Angular headers object:

headers: Map(0) {}
lazyInit: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: 
Map(0)}
lazyUpdate: Array(1)
  0:
    name: "Authorization"
    op: "a"
    value: "Basic NTY2MTI0OnVuZGVmaW5lZA=="
    __proto__: Object
    length: 1
  __proto__: Array(0)
normalizedNames: Map(0) {}
__proto__: Object

What it should look like:

Request URL: http://localhost:8080/datasnap/rest/DSAdmin/GetPlatformName/
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8888
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Connection: close
Content-Length: 20
Content-Type: text/html; charset=UTF-8
Date: Thu, 18 Oct 2018 10:09:38 GMT
Pragma: dssession=63572.937476.131783,dssessionexpires=1197188
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,nl-NL;q=0.8,nl;q=0.7,en-US;q=0.6
Authorization: Basic NTY2MTI0Og==
Cache-Control: max-age=0
Content-Type: text/plain;charset=UTF-8
Host: localhost:8080
If-Modified-Since: Mon, 1 Oct 1990 05:00:00 GMT
Proxy-Connection: keep-alive
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

What mine looks like:

Request URL: http://localhost:8080/datasnap/rest/DSAdmin/GetPlatformName
Request Method: OPTIONS
Status Code: 401 Unauthorized
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: *
Connection: close
Content-Length: 49
Content-Type: text/html; charset=utf-8
Date: Thu, 18 Oct 2018 13:47:12 GMT
WWW-Authenticate: Basic realm="REST"
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,nl-NL;q=0.8,nl;q=0.7,en-US;q=0.6
Access-Control-Request-Headers: authorization
Access-Control-Request-Method: GET
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:8100
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Console error:

VM1038:1 OPTIONS http://localhost:8080/datasnap/rest/DSAdmin/GetPlatformName 
401 (Unauthorized)
(anonymous) @ VM1038:1

(index):1 Failed to load 
http://localhost:8080/datasnap/rest/DSAdmin/GetPlatformName: Response for 
preflight does not have HTTP ok status.

Fiddler Raw: Request

OPTIONS http://localhost:8080/datasnap/rest/DSAdmin/GetPlatformName HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:8100
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36
Access-Control-Request-Headers: authorization,x-authentication,x-authentication-impersonate
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en;q=0.9,nl-NL;q=0.8,nl;q=0.7,en-US;q=0.6

Response

HTTP/1.1 401 Unauthorized
Connection: close
Content-Type: text/html; charset=utf-8
Content-Length: 49
Date: Thu, 18 Oct 2018 10:06:24 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: *
WWW-Authenticate: Basic realm="REST"
<HTML><BODY><B>401 Unauthorized</B></BODY></HTML>

Answer 1

I fixed it by adding the following piece of code to the TWebModule1.WebModuleBeforeDispatch in Delphi:

if Trim(Request.GetFieldByName('Access-Control-Request-Headers')) <> '' then
begin
  Response.SetCustomHeader('Access-Control-Allow-Headers', Request.GetFieldByName('Access-Control-Request-Headers'));
  Handled := True;
end;

Source: CORS issue on a Delphi's Datasnap ISAPI Module