Angular HttpClient Ответ на предварительный запрос не проходит проверку контроля доступа: не имеет HTTP-статуса ok

Question

Я пытаюсь использовать HttpClient для получения json возврата из файла, который я заблокировал, используя htaccess и htpasswd на моем веб-сервере. Я могу выполнить запрос get / post на почтальоне с заголовком авторизации, и он возвращается нормально. Когда я запускаю его в angular, я получаю ошибку в заголовке вместе с ошибкой 401.

Вот функция, которая запускает запрос HttpRequest

  getConfig(): Observable<any> {
    return this.http.get('myurlhere/myfile.json', { responseType: 'json' })
  }

Вот мой перехватчик - и да, console.log запускается, и запись результатов показывает запрос с добавленными заголовками.

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXX'
      }
    })
    console.log('INTERCEPTED')
    return next.handle(req);
  }
}

Здесь много подобных проблем, но, похоже, ничего не работает. Возвращение 401 помечено как ОПЦИИ, и я собрал воедино, что это значит, просто не могу обойти это.

Answer 1

FIX Это оказалось проблемой на стороне сервера с htaccess и настройкой CORS.

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header always set Access-Control-Allow-Headers: "Authorization"

<Files config.json>
AuthType Basic
AuthName "Authentication Required"
AuthUserFile C:\xampp\htdocs\.htpasswd
Options -Indexes
<LimitExcept OPTIONS>
  Require valid-user
</LimitExcept>
</Files>

Мне нужно было добавить блок LimitExcept, затем он начал работать!

Answer 2

Кажется, есть проблема с request, объект request (req) является неизменяемым, поэтому вы должны определить новое свойство и клонировать запрос к нему, а затем обновить его

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const modifiedReq = req.clone({
      setHeaders: {
        'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXX'
      }
    })
    console.log('INTERCEPTED')
    return next.handle(modifiedReq); // pass the modified request to the handle method
  }
}

проверьте документы для получения дополнительной информации

надеюсь, что это поможет