Angular 4.3 HTTPClient Basic Authorization not working

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

Hi can 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;@Configurationpublic 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 request should be like that,

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 githup repo sample demospring mvc with angular2/4

I was having the same problem and authorization header was not going with post request.This was my authenticate function

authenticate(username, password) {const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });return this.httpClient.post<any>('<your-login-url>',{headers}).pipe( map(   userData => {    sessionStorage.setItem('username',username);    return userData;   } ));

I did not know that post requires second argument as body and third as headers.After coming this question I found it from question itself that I need to send a second argument as blank json because I dont have anything in body.

And here is the correct code for above authenticate function

authenticate(username, password) {const headers = new HttpHeaders({ Authorization: 'Basic ' + btoa(username + ':' + password) });return this.httpClient.post<any>('<your-login-url>',{},{headers}).pipe( map(   userData => {    sessionStorage.setItem('username',username);    return userData;   } ));

Which is working fine now.