Angular 6 Http request fails with authorization headers

Question

I'm deploying and angular 6 application that works with a tomcat server in localhost , when I try to execure this http request

this.http
      .post<LoginResult>( API_URL + '/login', JSON.stringify(json)/*, { headers: myHeader }*/).pipe(
        catchError(this.handleError('get-token', []))).subscribe((response) => {
      if(response['result_code'] == 'result_ok') {
        this.auth.doSignIn(response['token'], response['name']);
        this.router.navigate(['user_manager']);
        return true;
      }else {
        return false;
      }
    });

everitying works well, but when I add header field

let myHeader = new HttpHeaders().append("Authorization", 'Basic' + this.session.getAccessToken());

    this.http
      .post<LoginResult>( API_URL + '/login', JSON.stringify(json), { headers: myHeader }).pipe(
        catchError(this.handleError('get-token', []))).subscribe((response) => {
      if(response['result_code'] == 'result_ok') {
        this.auth.doSignIn(response['token'], response['name']);
        this.router.navigate(['user_manager']);
        return true;
      }else {
        return false;
      }
    });

this is my output error:

Access to XMLHttpRequest at 'http://localhost:8095/login' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HttpErrorResponse

I checked also that the request doesn't arrive to my tomcat server, it is blocked before, that oesn't allow angular to check response headers

Thank you for your help

Answer 1

I'm providing you a generic answer as you have not mention that your server side code is written in which language.
You should provide a header from your server code. Provide Access-Control-Allow-Origin header with value as localhost:4200 which will resolve your issue. Or if you want to allow every origin then change its value from localhost:4200 to * .

After reading all the comments I have change something for you.

change your this code let myHeader = new HttpHeaders().append("Authorization", 'Basic' + this.session.getAccessToken()); with const myHeader = new HttpHeaders({'Authorization': 'Bearer ' + localStorage.getItem('api_token')}); and make your post request as

this.http
      .post<LoginResult>( API_URL + '/login', json, myHeader).pipe(
        catchError(this.handleError('get-token', []))).subscribe((response) => {
      if(response['result_code'] == 'result_ok') {
        this.auth.doSignIn(response['token'], response['name']);
        this.router.navigate(['user_manager']);
        return true;
      }else {
        return false;
      }
    });

Answer 2

You need to configure CORS on your tomcat server.

You need to tell tomcat which headers the application is allowed to send, so it can include it in the preflight response:

<init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Authorization,Content-Type,...</param-value>
</init-param>

Take a look at

cors.allowed.methods under CORS Filter section here: https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html