将HttpHeader添加到Angular 8.1.3中的http.get（）无法命中API端点

我使用Angular 8.1.3对RESTful API端点执行HTTP访问：

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

导出类分析服务{
私有分析URL=https://localhost:44367/api/analysis“；//指向web api的URL
httpOptions={
标头：新的HttpHeaders（{'apiKey'：'xxxxx'}）
};
建造师(
专用http:HttpClient）{}
/**按id获取分析。如果找不到id，将执行404*/
getAnalysis（id:number）：可观察{
constURL=`${this.analysisUrl}/${id}`；
log（'url:'+url）；
返回this.http.get（url，this.httpOptions）.pipe(
点击（=>this.log（`fetched analysis id=${id}`）），
catchError（this.handleError（`getAnalysis id=${id}`））
);
}

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

---

我做错了什么？

正如@JoelJoseph所回答的，CORS策略应该在服务器端处理。服务器预期的头也可能不同。大多数API端点出于身份验证目的接受“Authorization”头，其中头值应以“Bearer”作为前缀。如果服务器不允许某些头，在您的例子中是“apiKey”。请验证api允许的头。

我能够解决此问题。我的angular应用程序位于4200，ASP.NET Core api位于端口44367，因此存在CORS问题

我跟随Rick Strahl的这篇精彩文章，在API上为环境==开发时配置CORS：

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

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

---

现在可以工作了！谢谢大家的提示。

您可以尝试添加访问控制允许标题吗：内容类型访问控制允许方法：GET、POST、OPTIONS访问控制允许来源：*这些标题以及您的apiKey@Ravi，我将其更改为此，但仍然得到相同的错误：httpOptions={headers:new-HttpHeaders({'apiKey'：'6839F78B-E996-42E1-86B9-12169FD37A86'，'Access Control Allow Header'：'Content Type'，'Access Control Allow Methods'：'GET，POST，OPTIONS'，'Access Control Allow Origin'：'*'）}；@marknugent应该在服务器端处理CORS策略，确保您有正确的CORS配置。您也可以将CORS配置以发送方式发布到这里，它看起来很奇怪

headers:new-HttpHeaders（{'apiKey'：'xxxxx'}）

它可能类似于

headers:new-HttpHeaders（{'Authorization'：'xxxxx'}）

或

headers:new-HttpHeaders（{'Authorization'：'Bearer xxxxx'}）

httpOptions={headers:new-HttpHeaders（{'apiKey'：'xxxxx'}）}；

是您的api密钥，如果没有此选项，您如何访问api？