Is it possible to add a request header to a CORS preflight request?

Question

I have a website that accesses an API from an external server (not the server that serves the website) via a plain XmlHttpRequest (see below). That API requires an API key for accessing the service to be added as request header. However, as these are CORS requests the browser first does a preflight request to check if that server supports CORS. Now, it seems that the server also wants to see the API key in these preflight requests that are done by the browser. Is it possible to pass the API key also to the preflight request?

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();

Answer 1

The CORS preflight OPTIONS request is completely controlled by the browser — so it's not possible to add any request headers to it. See https://fetch.spec.whatwg.org/#cors-preflight-fetch . That's why any endpoint you send a request to must be configured to allow unauthenticated OPTIONS requests, and respond to them with a 200 OK — at least as long as your request triggers a preflight (which it always will if you add any custom request headers, such as the x-api-key header in the question).