Angular2 Can't see my custom headers attached

I am trying to attach a custom Authorization header to my get requests in my angular2 app.

Here's my code:

private headers : Headers;
  constructor (private http: Http)
  {
    this.headers = new Headers();
    //this.headers.append('Content-Type', 'application/json');
    let jwt = localStorage.getItem('id_token');
    if(jwt)
      this.headers.append('Authorization', 'Bearer ' + jwt);
  }

  private journalsUrl = Config.API_URL + 'journal';  // URL to web API

  getJournals (): Observable<Journal[]>
  {
    return this.http.get(this.journalsUrl, { headers: this.headers })
                    .map(this.extractData)
                    .catch(this.handleError);
  }

I made sure that my laravel 5 with barryvdh/laravel-cors server allowed pretty much everything related to headers:

'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => ['Authorization'],
'maxAge' => 0,
'hosts' => [],

As I debug when I look at the networks tab in google chrome looking at the headers of that particular request that fails I see: General:

Request URL:http://ift.tt/2bGZPHq
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:127.0.0.1:80
Response Headers

Request Headers:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,ar;q=0.6
Access-Control-Request-Headers:authorization
Access-Control-Request-Method:GET
Connection:keep-alive
Host:api.ketabuk.dev
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Notice that: Access-Control-Request-Headers:authorization. But notice also that the Authorization field itself is not there.

What am I doing wrong?

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2bYZaid
via IFTTT