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

Question

我正在使用 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 控制台：

我做错了什么？

Answer 1

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

允许的 header

Answer 2

我能够解决这个问题。我的 angular 应用程序在 4200 上，我的 ASP.NET 核心 API 在端口 44367 上——因此出现了 CORS 问题。

我按照 Rick Strahl 的精彩 post 在我的 API 上为环境 == 开发配置了 CORS：https://weblog.west-wind.com/posts/2016/sep/26/aspnet-core-and-cors-gotchas

然后我将 API 键添加到我的 Angular 服务中的 GET 请求，如下所示：

  httpOptions = {
    headers: new HttpHeaders({
      'Authorization': 'Basic NjgzOUY3OEItRTk5Ni00MkUxLTg2QjktMTIxNjlGRDM3QTg2Og==',//todo don't hardcode
    })
  };

现在可以使用了！谢谢大家指点

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

Adding HttpHeaders to http.get() in Angular 8.1.3 fails to hit API endpoint

http-get

http-headers

angular