How to setup CORS between two CloudFront Distributions?

Question

I have two CloudFront Distributions:

one uses S3 as Origin - route53 Domain - example.com
second uses API Gateway URL as Origin. - route53 Domain - api.com

JS Code is hosted on S3 and First Cloudfront Distribution. https://example.com/test.html is giving call to https://api.com/api?<queryParameters>

However I am getting error saying: Access to XMLHttpRequest at 'https://api.com/api?<queryParameters>' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I tried adding Access-Control-Request-Headers,Access-Control-Request-Method and Origin in Whitelist of Cache Based on Selected Request Headers in API CloudFront Behavior. Still no luck

What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it as 4xx or 5xx error rather than a 200 OK success response? — sideshowbarker, Jul 23 '19 at 23:07

score 0 · Accepted Answer · answered Aug 06 '19 at 09:43

This issue got resolved by adding Header message in Lambda function response. Similar to this:

   response["headers"] = {
       'Content-Type': 'application/json', 
       'Access-Control-Allow-Origin': '*' 
   }

Ref: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

How to setup CORS between two CloudFront Distributions?

1 Answers1