Angular 5 not sending header

Question

I've trawled through loads of posts but can't quite find my issue with the header not being passed in the get request:

return this.httpClient.get(this.parseUrl(controller), {
  headers: new HttpHeaders({'Authorization': 'bearer ' + this.authService.getToken()}),
  params: this.parseURLData(data)
})
  .timeout(this.serverTimeout);

So the request runs, the params are added but the headers are missing? All i get in the console, is:

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-GB,en-US;q=0.9,en;q=0.8
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:h98t5z1
Origin:http://localhost:4200
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

I have also tried this notation for the headers but still empty:

let headers = new HttpHeaders().set('header1', hvalue1); 
headers = headers.append('header2', hvalue2);

Package.json

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "bootstrap-css-only": "^4.0.0",
    "core-js": "^2.4.1",
    "moment": "^2.17.1",
    "roboto-fontface": "^0.6.0",
    "rxjs": "^5.5.6",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.19"
}

The request works in postman as the header exists.

Any ideas?

Answer 1

I was switching between Android and Chrome app. Android requires the name of my machine on the network and Chrome doesn't work with this but works with localhost. Changing my URL to use localhost in Chrome did the trick.