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

server should have to whitelist accepted headers, what's the preflight response claim? — dandavis

sideshowbarker sideshowbarker · Accepted Answer · 2019-10-25T07:57:40

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

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

1 Answers