xhr.setRequestHeader() merging my headers

Question

I want to add header to my xhr.

When I use setRequestHeader, what it actually does is adding a value to Access-Control-Request-Headers.

If I code:

xhr.setRequestHeader('key1', 'value1');
xhr.setRequestHeader('key2', 'value2');

What I see in the request header is: Access-Control-Request-Headers:accept, key1, key2

What i expect to see instead is:

key1: value1

key2: value2

How can I prevent this merging? Thanks!

Answer 1

You're making a non-simple cross-domain XMLHttpRequest (read more about CORS here) which means that your browser must send an preflight (OPTIONS) request prior to your intended request. This is done to verify with the server that the client from a different origin is allowed to make said request. When you are making a CORS request the browser will automatically add the Access-Control-Request headers to the request when it gets sent.

The Access-Control-Request-Headers header is a comma-delimited list of non-simple headers that are included in the request. The only "simple" headers you can set are: Accept, Accept-Language, Content-Language, Last-Event-ID, and Content-Type (if it is set to one of: application/x-www-form-urlencoded, multipart/form-data, or text/plain).

The server must respond to those Access-Control-Request headers in the preflight request with the corresponding Access-Control-Allow headers in its response. So in your case it would need to respond with Access-Control-Allow-Headers: key1, key2.