title: Angular 2 http header seems to be generated or send incorrectly
body: <p>I am trying to send a request to my backend which uses HTTP Basic auth for authentication.
  For testing purposes </p>
  
  <pre><code>username: user
  password: password
  </code></pre>
  
  <p>so the correct header is:</p>
  
  <pre><code>Authorization: Basic dXNlcjpwYXNzd29yZA==
  </code></pre>
  
  <p>I have tested the request with this header in Chrome Advanced Rest Extension and it works:</p>
  
  <p><a href="https://i.stack.imgur.com/qGTrH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qGTrH.png" alt="enter image description here"></a></p>
  
  <p>I generated the request in Angular2 like this:</p>
  
  <pre><code>  public getCurrentCounter() {
      console.log("Method getCurrentCounter() in CounterService called");
  
      var request = this.backendURL + "counter";
      var header = this.generateHeader(this.username, this.password);
      console.log(header);
  
      return this._http.get(request, {
        headers: header
      })
        .map(res =&gt; res.json());
    }
  
    /**
     * Generate HTTP header using HTTP basic Auth
     */
    private generateHeader(username, password) {
  
      var base64Creds = btoa(username + ":" + password);
      var auth = 'Basic ' + base64Creds;
      console.log(auth);
      var authHeader = new Headers();
      authHeader.append("Authorization", auth);
  
      return authHeader;
    }
  </code></pre>
  
  <p>I logged the generated Header Object and it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/6NB2N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6NB2N.png" alt="enter image description here"></a></p>
  
  <p>Still I get this response:</p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost:8080/counter. Response for preflight has invalid HTTP status code 401
  </code></pre>
  
  <p>Anybody an idea what could be wrong?</p>