Ошибка Angular 6 Http с заголовками авторизации

Question

Я развертываю и angular 6 приложение, которое работает с tomcat сервером на localhost , когда я пытаюсь выполнить этот http-запрос

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 работает хорошо, но когда я добавляю поле заголовка

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;
      }
    });

, это моя ошибка вывода:

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

Я также проверил, что запрос не приходит кМой сервер Tomcat, он был заблокирован ранее, что не позволяет angular проверять заголовки ответа

Спасибо за вашу помощь

Answer 1

Вам необходимо настроить CORS на вашем сервере tomcat.

Вам нужно указать tomcat, какие заголовки приложению разрешено отправлять, чтобы он мог включить его в предварительный ответ:

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

Взгляните на

cors.allowed.methods в разделе фильтра CORS здесь: https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html

Answer 2

Я предоставляю вам общий ответ, поскольку вы не упомянули, что на каком языке написан код вашей серверной стороны.
Вы должны предоставить заголовок из кода вашего сервера.Укажите заголовок Access-Control-Allow-Origin со значением localhost:4200, что решит вашу проблему.Или, если вы хотите разрешить каждое происхождение, измените его значение с localhost:4200 на *.

После прочтения всех комментариев у меня есть что-то для вас.

измените ваш код let myHeader = new HttpHeaders().append("Authorization", 'Basic' + this.session.getAccessToken()); с const myHeader = new HttpHeaders({'Authorization': 'Bearer ' + localStorage.getItem('api_token')}); и отправьте запрос как

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;
      }
    });