java - Angular 4.3 HTTPClient Basic Authorization not working

Question

I am trying to implement basic authorization in Angular 4 using the newly released HttpClient.

I am trying to connect to a Spring application running on Tomcat with exposed REST APIs.

I have the following code in my LoginComponent:

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 => {
         console.log(response);
   }, err => {
      console.log("User authentication failed!");
   });
}

However, the request does not add Authorization header at all.

This is from the Chrome tools Network tab:

What am I doing wrong ? How can I make this work ?

---

Update 1: Its still not working:

I changed my two lines as below:

headers = headers.append("Authorization", "Basic " + btoa("username:password"));
headers = headers.append("Content-Type", "application/x-www-form-urlencoded");

I am getting header in the request as expected. This is from Chrome:

However, the post call is still failing.

At server side, my code is:

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
}

Call is never reaching do my stuff. authCredentials is null.

This is from chrome:

How to proceed ?

Answer 1

HttpHeaders is immutable, so you need to assign the result of the function to override the headers object each call.

let headers = new HttpHeaders();
headers = headers.append("Authorization", "Basic " + btoa("username:password"));
headers = headers.append("Content-Type", "application/x-www-form-urlencoded");

Source: Angular Docs