Cloudfront and CORS: How do I configure "Forward the Origin header along with any other headers required by your origin."?

1
votes

My Situation

I have a web api hosted in an EC2 instance. I am trying to configure a cloudfront instance "infront" of that EC2 instance.

However, I have not been able to get my cloudfront to forward requests to the EC2 instance. I get hit with an error response like this:

Access to XMLHttpRequest at 'https://api.example.com' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No access-control-Allow-Origin header is present on the requested resource

However, if I change my DNS to point https://api.example.com to EC2 instance's IP address, it works.

What I have done so far

  • Configured to use correct SSL certificate (for a different problem earlier)
  • Configured my CF distribution's behaviors to Whitelist Headers: "Origin"
  • Configure my CF distribution's behaviors to "All" - (which disables caching)
  • Invalidated cloudfront cache

What I am trying to do

I came across this AWS doc titled "Configuring CloudFront to Respect CORS Settings".

Link

However, it only says "Custom origins – Forward the Origin header along with any other headers required by your origin."

But... How do I do that? How do I forward origin header along with any other headers required? The docs doesn't specify or link to another docs to do it.

I have spent 4 hours or so now and it's extremely frustrating because Cloudfront takes ~30 minutes to deploy.

1
amazon-web-services
"How do I do that?" By whitelisting the headers your origin needs (in the Cache Behavior settings) -- at minimum, you likely need Origin, Access-Control-Request-Headers, and Access-Control-Request-Method. But if forwarding all headers didn't reasult in satisfactory behavior (you said you tried that earlier), then forwarding that subset isn't going to work, either, of course. Reconfigure to forward all headers, do an invalidation of /* and start testing again after everything settles. Observe your server logs. Observe request and response headers. – Michael - sqlbot

1 Answers

0
votes

I have managed to fix this issue it turned out I had overlooked another error returned by Cloudfront: 502 Bad Gateway. Even though Chrome will show the abovementioned error "Access to XMLHttpRequest...". This was caused by my improper DNS and SSL certificates configuration due to my inexperience.

I will try to answer my own question, seeing after hours of searching, there wasn't a straight answer regarding (Cloudfront, EC2 and HTTPS) in Stackoverflow and there are many unaswered questions.

The goal my group was trying to achieve was enabling HTTPS connectivity for the entire set-up: Users' browsers, Cloudfront distribution and my EC2 instance.

What I did to fix this:

  • Generated a free SSL certificate (e.g. Let's Encrypt) to use for EC2 instance using a sub-domain (i.e. ec2.example.com or wildcard *.example.com). *Note: ACM does not allow public SSL certificates to be exported that can be used in EC2 instances, so use other free online SSL services. Do not use self-signed certs.
    • Import this certificate into ACM to be used for Cloudfront later too.
  • Created a new DNS A record to map the sub-domain to the EC2 instance. (e.g. ec2.example.com to ec2-xx-xxx-xx.ap1-location.amazonaws)
  • Created a new Cloudfront distribution and set the origin as the sub-domain, ec2.example.com. Also, under "Cache Based on Selected Request Headers", set it to "Whitelist" and to forward "Origin" headers. For SSL cert in Cloudfront, use back the one generated back in step 1)
  • Created a new DNS A record and map an "api" sub-domain to the Cloudfront. (e.g. api.example.com to abcdxyz.cloudfront.net)
  • I am now able to use a sub-domain (api.example.com) to communicate with Cloudfront which in turns communicates back to my EC2 and performs caching, using HTTPS all along.

Reference links: link1, link2

There is probably a better way to set this up and if so, please do correct me so I can improve too! Hopefully this answer will help someone else new like me in the future too.