在 Angular 服务的标头中调用 x-api-key答案

【问题标题】：calling an x-api-key in the header of an Angular service在 Angular 服务的标头中调用 x-api-key
【发布时间】：2023-02-08 02:07:22
【问题描述】：

我正在尝试在角度服务的标头中调用 x-api-key，但在语法中遗漏了一些内容。到目前为止，我的代码吐出授权错误。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class PrecipForecastService {

  constructor(private http:HttpClient) { }

  getData () {
    const url = 'url_here';
    const key = 'key_here';
    const header = new HttpHeaders({'x-api-key': key});
    return this.http.get(url, {headers: header});
  }
}

浏览器的网络选项卡显示：

CORS 策略已阻止从来源“localhost:4200”访问“url_here”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头.

是的，密钥是正确的，它与 JS 获取模块一起使用。

谢谢您的帮助！

【问题讨论】：

您的后端是否接受任何案例？例如。也许只接受区分大小写的X-Api-Key
必须首先在服务器（配置级别）上启用自定义请求标头。请检查它是否已从服务器公开/启用（也区分大小写）。
后端文档指定“x-api-key”。我还尝试了多种案例类型（X-Api-Key 和 X-API-KEY）但没有成功。另外是的，后端接受这个请求，因为我让它在 vanilla JS 中使用 fetch 模块工作。
您是否在浏览器网络选项卡中看到添加的标题？密钥是否正确？
CORS 策略已阻止从来源“localhost:4200”访问“url_here”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头.是的，密钥是正确的，它再次与 JS 获取模块一起使用。

标签： javascript angular api

【解决方案1】：

今天，我遇到了完全相同的问题。检查 Chrome 开发控制台中的网络选项卡后（按 F12），我发现了一个有趣的预检响应：

在这里，access-control-allow-headers 给出了问题的答案。他们根本不允许X-API-Key，但我可以使用access-token，然后它起作用了……至少我没有再收到 CORS 错误。就我而言，api 文档只是“错误”。

hth

【讨论】：