是否可以向 CORS 预检请求添加请求标头？

Posted 2023-03-04

【中文标题】是否可以向 CORS 预检请求添加请求标头？

【英文标题】：Is it possible to add a request header to a CORS preflight request?

【发布时间】：2020-02-21 03:44:13

【问题描述】：

我有一个从外部服务器（不是服务器）访问 API 的网站 为网站服务）通过普通的XmlHttpRequest（见下文）。那个API 需要将用于访问服务的 API 密钥添加为请求标头。 但是，因为这些是CORS 请求浏览器首先执行预检请求以检查该服务器是否 支持 CORS。现在，似乎服务器也想在 这些由浏览器完成的预检请求。是否可以通过 预检请求的 API 密钥？

const req = new XMLHttpRequest();
req.open("GET", "https://some/api/endpoint");
req.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
req.setRequestHeader("x-api-key", _apiKey);
req.onload = () => 
  // ...
;
req.send();

【问题讨论】：

服务器应该必须将接受的标头列入白名单，预检响应声明是什么？

【参考方案1】：

CORS 预检OPTIONS 请求完全由浏览器控制——因此无法向其添加任何请求标头。见https://fetch.spec.whatwg.org/#cors-preflight-fetch。这就是为什么您向其发送请求的任何端点都必须配置为允许未经身份验证的OPTIONS 请求，并以200 OK 响应它们——至少只要您的请求触发预检（如果您添加任何自定义请求标头，例如问题中的 x-api-key 标头）。