IE CORS - Access-Control-Allow-Headers error even though headers are specified

Question

I'm currently submitting an AJAX request on a web page to an API endpoint which works in Chrome and Firefox but not in IE.

The error message I'm getting in IE's dev tools is:

SEC7123: Request header x-custom-header was not present in the Access-Control-Allow-Headers list.
SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

Looking at the pre-flight OPTIONS request, here are some of the headers:

Origin: http://www.example.org
Access-Control-Request-Headers: content-type, accept, x-custom-header
Access-Control-Request-Method: GET

The response of the pre-flight shows this:

Access-Control-Allow-Headers: content-type, x-custom-header
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS
Access-Control-Allow-Origin: *

After this happens, the AJAX request isn't executed. It looks like IE cannot see that the header was returned in the response of the pre-flight request.

Any help would be greatly appreciated and if you need more information, please ask.

Thanks, James

Answer 1

We ran into a CORS issue with Internet explorer and Access-Control-Allow-Methods, they are not compatible with allow '*' in OPTIONS response. Fix was to change the options response in our API gateway to use all methods