Angular HttpClient 對預檢請求的響應未通過訪問控制檢查：它沒有 HTTP 正常狀態

Question

我正在嘗試使用 HttpClient 從我在 web 服務器上使用 htaccess 和 htpasswd 鎖定的文件中獲取 json 返回。 我可以使用授權 header 在 postman 上運行獲取/發布請求，它返回正常。 當我在 angular 中運行它時，我得到標題中的錯誤以及 401 錯誤。

這是觸發HttpRequest的function

  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 返回標記為 OPTIONS，我已經拼湊了這意味着什么，只是找不到解決方法。

Answer 1

修復它最終成為 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
  }
}

檢查文檔以獲取更多信息

希望能幫助到你