7

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.

Jason
  • 9,408
  • 5
  • 36
  • 36

3 Answers3

12

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.

jackko
  • 6,998
  • 26
  • 38
  • Thanks Jack. Is this the intended behaviour? I would've thought that if I enabled CORS and a custom header, API GW would (/should) do the rest. – Jason Apr 08 '16 at 06:42
  • 1
    Yes this is the intended behavior. I suppose it could be more automated, but we try to stay away from that kind of 'magic' change in general. I'll discuss with the team, we might make an exception for this since it does make sense to me. – jackko Apr 08 '16 at 19:12
7

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
John Troxel
  • 71
  • 2
6

Not sure if someone found the solutions but there is an option under the Options--> Integration Response--> Access-Control-Allow-Headers: enter image description here

Ngen CMS
  • 146
  • 1
  • 6
  • This really helped me. I edited the response header values manually and it worked. Thanks for sharing. – GovZ Jan 11 '22 at 14:38