Solved: Angular 4.3 Basic HTTPClient authorization not working

Question

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

I am trying to connect to a Spring application running on Tomcat with open 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 the Authorization header at all.

This is the Chrome tools Network tab:

What am I doing wrong? How can I do this job?

---

Update 1: its still not working:

I changed two lines as below:

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

I get the header in the request, as expected. This is from Chrome :

However, the mail call still does not work.

On the 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 } 

The bell never reaches do my stuff . authCredentials null .

This is from Chrome :

How to act?

---

Update 2: its work:

I needed to do both:

1) I had to change the headers line to what I did in Update 1, since HttpHeaders is immutable.

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

2) Now, based on your requirement, you have two options:

a) Use a proxy server as described here to solve the CORS problem without changing the end of your server.

b) Update the end of the server as described here and in some of the answers below to change the spring configuration.

Answer 1

HttpHeaders is immutable, so you need to assign a function result to override the headers object for 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

Answer 2

Hi, your backend cors configuration

 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class RestConfig { @Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("*"); config.addAllowedHeader("*"); config.addAllowedMethod("OPTIONS"); config.addAllowedMethod("GET"); config.addAllowedMethod("POST"); config.addAllowedMethod("PUT"); config.addAllowedMethod("DELETE"); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } } 

Your angular query should be like this

 import { Http , Headers, Response } from '@angular/http'; let headers = new Headers(); headers.append("Authorization", "Basic " + btoa("username:password")); headers.append("Content-Type", "application/x-www-form-urlencoded"); 

You can also check demo demo demo demo spring mvc demo with angular2 / 4

Answer 3

Use RequestOptions to set headers in your mail request.

  import { Http,Headers,RequestOptions } from '@angular/http'; .. .. let headers = new Headers(); headers.append("Authorization", "Basic " + btoa("username:password")); headers.append("Content-Type", "application/x-www-form-urlencoded"); let options = new RequestOptions({ headers: headers }); this.http.post('my url here',body, options).subscribe(response => { console.log(response); }, err => { console.log("User authentication failed!"); });