In a previous video (https://youtu.be/PHGtpG3Hcp0) we saw the theory behind cross-origin resource sharing (CORS) and how it works with Amazon S3 buckets. In this video, we put that theory into action in the AWS Console.
In a hands-on demo, we’ll create two S3 buckets (enabling static website hosting and opening up public access). Then we upload two HTML files to the origin bucket, showing that it works. Next, we split the HTML files across the two buckets (one in the origin bucket and one in the cross-domain bucket) and see that we get a CORS error. “Fetch blocked by CORS policy.” “No Access-Control-Allow-Origin header is present.” Doh!
To fix the error, we enable CORS on the cross-origin bucket, allowing GET method requests from the origin bucket.
The code from the demo can be found here: https://docs.google.com/document/d/1wQRTmaHypJ1WrxQ2Pju1r51wJlzV3N39cq-CSRidN3E/edit?usp=sharing.
??If you’re interested in getting AWS certifications, check out these full courses. They include lots of hands-on demos, quizzes and full practice exams. Use FRIENDS10 for a 10% discount!
– AWS Certified Cloud Practitioner: https://academy.zerotomastery.io/a/aff_n20ghyn4/external?affcode=441520_lm7gzk-d
– AWS Certified Solutions Architect Associate: https://academy.zerotomastery.io/a/aff_464yrtnn/external?affcode=441520_lm7gzk-d
00:00 – Overviewing the two buckets (origin and cross-origin) and HTML pages we’ll be creating
00:38 – Creating the origin bucket in S3 to host a static website
02:29 – Creating the cross-origin bucket in S3 to host a static website
03:49 – Uploading the HTML files to the origin bucket
05:32 – Moving one HTML page to the cross-origin bucket
07:42 – CORS error! Fetch blocked by CORS policy. No Access-Control-Allow-Origin header is present
09:00 – Fixing the CORS error by enabling CORS on the cross-origin bucket, JSON policy
10:17 – Testing our CORS changes
