API Gateway CORS Issue

Question

So I have CORS enabled going through the basic setup given by AWS Gateway. However for this API I need to allow Control Origins for all requests and allow credentials.

Answer 1

Jurgen from API Gateway here. Thanks for reporting this issue. There is currently no simple way to set it up via the "Enable CORS" feature in the console. However, we are looking into it to improve the user experience for this use case.

As a potential workaround, you could passthrough the Origin header from the client to your backend and parse / create the value for the Access-Control-Allow-Origin header there. Then you would map the Header in the Integration Response from 'integration.response.header.Access-Control-Allow-Origin' to Access-Control-Allow-Origin and return it to the client.

Hope this helps.

Best, Jurgen

Answer 2

Okay After hours of research and finding bits of information across the internet I have a solution and hopefully it is useful for other people.

To pass an HTTP Header that is not a default value provided by AWS API Gateway and then access that data via a Lambda Function and return that data in the Response Header follow the steps below

1. In "Method Request" go to "HTTP Request Headers" and add your desired header to capture. ie. if we want to get the host value of the API url you can enter "Host" here. if you want to get the website host of the caller use "Origin"

2. In "Integration Request" go to mapping templates and create a new template if an "application/json" does not exist, if it does just update it.

This is the important part, pass the header value you set in step 1. To do that write something similar to the following in the Template Box.

{
   "origin" : "$input.params().header.Origin",
   "host" : "$input.params().header.Host"
}

You can also pass in any url parameters you have defined in the same JSON.

3. Access the data from Lambda, The integration request passed the information into the "Event" parameter if using Node as the Lambda Backend code. to retrieve the value of any header just use the following within your handler.

   event.origin;
   

4. When sending back your response from Lambda to API Gateway, it is best to format the response in JSON. Something similar to this.

   { 
      "origin" : event.origin,
      "host" : event.host,
      "nonHeaderOutput" : "Hello World"
   }
   

5. In "Integration Response" go to "Header Mappings", if the header you need is not listed you may add it in "Method Response" and it will then appear here. For this example I used "Access-Control-Allow-Origin" and edited the Mapping Value to be integration.response.body.origin

6. now go to "Mapping Templates and select the content type you want to use, and then edit the template to access the non header responses by adding this to the Template Box

   $input.path("$.nonHeaderOutput")
   

That is it now the header that was sent to the API can be used in your method Response.