时间戳

首页 > 解决方案 > 在 Angular 8.1.3 中将 HttpHeaders 添加到 http.get() 无法命中 API 端点

angular - 在 Angular 8.1.3 中将 HttpHeaders 添加到 http.get() 无法命中 API 端点

问题描述

我正在使用 Angular 8.1.3 对 RESTful API 端点执行 HTTP GET：

export class AnalysisService {

  private analysisUrl = 'https://localhost:44367/api/analysis';  // URL to web api

  httpOptions = {
    headers: new HttpHeaders({ 'apiKey': 'xxxxx' })
  };

  constructor(
    private http: HttpClient) { }

  /** GET analysis by id. Will 404 if id not found */
  getAnalysis(id: number): Observable<PresentedAnalysis> {

    const url = `${this.analysisUrl}/${id}`;
    console.log('url: ' + url);

    return this.http.get<PresentedAnalysis>(url, this.httpOptions).pipe(
      tap(_ => this.log(`fetched analysis id=${id}`)),
      catchError(this.handleError<PresentedAnalysis>(`getAnalysis id=${id}`))
    );
  }

如果我从 http.get() 参数列表中删除 this.httpOptions ，此代码可以正常工作——它会在我的 API 端点上命中我的断点。但是，当我在 http.get() 调用中包含 this.httpOptions 时，我的断点没有命中，并且以下内容会记录到 Chrome 控制台：

在此处输入图像描述

我究竟做错了什么？

标签： angularhttp-headershttp-get

解决方案

正如@JoelJoseph 回答的那样，应该在服务器端处理 CORS 策略。此外，您的服务器预期的标头也可能会有所不同。大多数 API 端点接受 'Authorization' 标头以进行身份​​验证，其中标头值应以 'Bearer' 为前缀。如果服务器不允许某些标头（在您的情况下为“apiKey”），也可能会发生 CORS 错误。请验证 api 允许的标头。

推荐阅读