Can't use custom Request Headers on AWS API Gateway with CORS

Question

I have created and deployed an AWS API Gateway resource with the following structure including a custom HTTP Request Header 'X-header'

dev (stage)
  /echo (resource)
    POST (method)
      Method Request - Headers: X-header
    OPTIONS (method)
      Method Request - Headers: X-header

When I POST to the endpoint from Chrome, I get the following error.

XMLHttpRequest cannot load https://fxxxx.execute-api.us-west-2.amazonaws.com/dev/echo. Request header field X-header is not allowed by Access-Control-Allow-Headers in preflight response.

Chrome is doing a preflight check against the OPTIONS method. I can see the Request Headers:

Access-Control-Request-Headers:accept, content-type, x-header
Access-Control-Request-Method:POST

But the Response Headers only have:

Access-Control-Allow-Headers:Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token
Access-Control-Allow-Methods:POST,OPTIONS
Access-Control-Allow-Origin:*

Chrome expects the Response Access-Control-Request-Headers to include my custom x-header, which seems logical. Is this an API Gateway bug?

The only workaround I see is to remove the custom header and pass the data in the POST body.

Answer 1

You have full control over the CORS headers on the OPTIONS response in API Gateway. If you need to add x-header to the Access-Control-Allow-Headers header, go ahead and add it! Go to the Integration Response for the OPTIONS method and modify the static value of that header.

When you first configure CORS using the console feature (you may not have done this), you can enter the list of headers there and see other advanced headers as well.

So you can make this change in the future at create-time, or update it on the fly after the OPTIONS has been created.

Answer 2

I have the exact same issue. And I have added my custom header to comma-separated list for Access-Control-Allow-Headers under the resource, Enable CORS; and also under resource - OPTIONS - Integration Response, Header Mappings.

I get the same error in Chrome, and inspecting the OPTIONS call in Network, I do not see my header name in Access-Control-Allow-Headers in the response.

• John