Yesterday while testing my React App on Internet Explorer 11 I got
SEC7123: Request header content-type was not present in the Access-Control-Allow-Headers list
in F12 Developers Tools Console.
It happened during OPTIONS preflight HTTPS request to AWS API Gateway with CORS enabled. CORS was enabled via MOCK Integration Request.
Mandatory CORS response headers
- Access-Control-Allow-Headers
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
were added in Header Mappings on Integration Response settings
I checked via Developer Tools that these headers were returned in Response Headers for OPTIONS request.
Value for Access-Control-Allow-Headers was set to wildcard * to accept any header e.g accept, content-type, x-amz-date, authorization, x-amz-security-token from Request Headers
So why IE11 was complaining with “SEC7123: Request header content-type was not present in the Access-Control-Allow-Headers list” ? Everything was working fine on Chrome and Edge. It turns out that IE11 ignores wildcard * value for Access-Control-Allow-Headers. After setting required headers in Access-Control-Allow-Headers explicitly in AWS Console
IE11 started working.