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

Okay, so I've found the solution. It turns out that IE enforces the headers' values to be in a comma separated list and the pre-flight request was responding with multiple headers with the same key. (Even though the W3 says that doing this should be okay). For example, the response could specify the Access-Control-Allow-Headers header twice:

Access-Control-Allow-Headers: content-type
Access-Control-Allow-Headers: accept

All of the dev tools (including IE's) on the network tab show the headers combined together as a comma separated list even though they're technically different headers with the same name. This is where the confusion came from.

This was discovered when using Postman to simulate the pre-flight requests and seeing the headers be returned as separate items.

Therefore, to fix this, ensure that the CORS headers such as "access-control-allow-headers" contain a comma separated list rather of the headers which are required since IE will only accept the first one sent. For example, the response should be:

Access-Control-Allow-Headers: content-type, accept

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