CODEWITHSUNDEEP
amazon-web-serviceshttp-headerscorsaws-api-gateway
Jason
Jason

Reputation: 10842

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

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.

Upvotes: 7

Views: 13286

Answers (3)

Ngen CMS
Ngen CMS

Reputation: 156

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

Upvotes: 7

John Troxel
John Troxel

Reputation: 81

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

Upvotes: 8

jackko
jackko

Reputation: 7344

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.

Upvotes: 13

Related Questions