Sign Up

Sign In

Forget Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

You must login to ask question.

Angular 4.3 HTTPClient Basic Authorization not working

  • 0

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:

enter image description here

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:

enter image description here

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 stuffauthCredentials is null.

This is from chrome:

enter image description here

How to proceed ?

Click to rate this post!
[Total: 0 Average: 0]
Share This Post
Share
  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

    • 0
Leave an answer

Leave an answer

Browse

close