title: Angular 4.3 HTTPClient Basic Authorization not working
body: <p>I am trying to implement basic authorization in <code>Angular 4</code> using the newly released <code>HttpClient</code>. </p>
  
  <p>I am trying to connect to a <code>Spring</code> application running on <code>Tomcat</code> with exposed <code>REST</code> APIs.</p>
  
  <p>I have the following code in my <code>LoginComponent</code>:</p>
  
  <pre><code>onSubmit(user){
     console.log(user);
     const body = JSON.stringify({username: user.userName, password: user.password});
  
     let headers = new HttpHeaders();
     headers.append("Authorization", "Basic " + btoa("username:password"));
     headers.append("Content-Type", "application/x-www-form-urlencoded");
  
     this.http.post('my url here',body, {headers: headers}).subscribe(response =&gt; {
           console.log(response);
     }, err =&gt; {
        console.log("User authentication failed!");
     });
  }
  </code></pre>
  
  <p>However, the request does not add <code>Authorization</code> header at all.</p>
  
  <p>This is from the <code>Chrome</code> tools <code>Network</code> tab:</p>
  
  <p><a href="https://i.stack.imgur.com/wbHQe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wbHQe.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong ?
  How can I make this work ?</p>
  
  <hr>
  
  <p>Update 1: Its still not working:</p>
  
  <p>I changed my two lines as below:</p>
  
  <pre><code>headers = headers.append("Authorization", "Basic " + btoa("username:password"));
  headers = headers.append("Content-Type", "application/x-www-form-urlencoded");
  </code></pre>
  
  <p>I am getting header in the request as expected. This is from <code>Chrome</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/j7MG5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/j7MG5.png" alt="enter image description here"></a>   </p>
  
  <p>However, the post call is still failing.</p>
  
  <p>At server side, my code is:</p>
  
  <pre><code>protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
      String authCredentials = request.getHeader("Authorization");
  
      if(authCredentials == null) {
          logger.info("Request with no basic auth credentials {}", request.getRequestURL());
          response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
          return;
      }
  
      // do my stuff
  }
  </code></pre>
  
  <p>Call is never reaching <code>do my stuff</code>. <code>authCredentials</code> is <code>null</code>. </p>
  
  <p>This is from <code>chrome</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/Ge7sN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ge7sN.png" alt="enter image description here"></a></p>
  
  <p>How to proceed ?</p>