title: Angular2 unable to set HTTP header authorization
body: <p>I've a service called <strong>ProjectService</strong>, where the following code exists:</p>
  
  <pre><code>..... # skip codes
  getProjects(): Observable&lt;any&gt; {
      let url = API.MAIN_URL + '/api/project/';
      return this.http.get(url, this.requestHeaders())
        .map(this.extractData)
        .catch(this.handleErrorObservable);
    }
  
  ..... # skip codes
  requestHeaders(): any {
      let headers = new Headers();
      headers.append('Access-Control-Allow-Origin', '*');
      headers.append('Authorization', 'token ' + localStorage.getItem('token'));
      let options = new RequestOptions({headers: headers});
      return options;
    }
  </code></pre>
  
  <p>In my <strong>ProjectComponent</strong> I tried to subscribe the <code>getProjects()</code> from <code>ProjectService</code> via following code:</p>
  
  <pre><code>ngOnInit() {
  
      this._projectService.getProjects().subscribe(data =&gt; {
          this.projects = data;
        },
        error =&gt; this.message = this.errorMessage(error._body));
  
    } 
  </code></pre>
  
  <p>The problem is, whenever my <code>ProjectComponent</code> loads, my console gives me following error:</p>
  
  <blockquote>
    <p>Response for preflight has invalid HTTP status code 401</p>
  </blockquote>
  
  <p>I go to my browsers network panel to see the error, it shows that </p>
  
  <blockquote>
    <p>"Authentication credentials were not provided."</p>
  </blockquote>
  
  <p>means that my request doesn't have any authorization token.</p>
  
  <p>I've used the <a href="https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj?hl=en" rel="nofollow noreferrer">ModHeader</a> plugin. then added the token there like <code>token eaab49d1dd392bda3fb807f33e1eb296897efc79</code> in the <code>Authorization</code> hash value.<br>
  And it works like a charm!</p>
  
  <p>Don't know how to solve the problem. </p>