Can't enable CORS on Lambda + API Gateway + Cloudfront on the Cloudfront layer

Question

I have deployed a lambda, which in itself returns an 'Access-Control-Allow-Origin': '*' header in it's response.

I call it from an API Gateway. When calling the API gateway URL, the CORS configuration is fine.

I placed CloudFront in front of the API, however now I am unable to access the API as the CORS configuration seems to be overridden by CloudFront, and I am not sure where to add custom headers in CloudFront.

How do you enable CORS inside CloudFront?

Answer 1

Go into your CloudFront distribution, click behaviours, select each behaviour and click edit, you'll see the section titled whitelist headers. Select 'Access-Control-Request-Headers' and 'Access-Control-request-methods' and click Add, also add Origin(thanks Michael for the catch), bottom right click "yes, edit".

Edit: please see Michael's comment below regarding preventing cached responses.

Voila.