Practicing CORS in Amazon S3: A Step-by-Step Guide

Cross-Origin Resource Sharing (CORS) is a security feature in web browsers that restricts cross-origin requests unless explicitly allowed. In this hands-on practice, we explore how to configure CORS settings in Amazon S3 to enable fetching resources from different buckets.

1. Understanding the CORS Setup

The goal is to:

1. Host a webpage (index.html) in one S3 bucket.
2. Host an extra HTML page (extra-page.html) in another S3 bucket.
3. Attempt to fetch extra-page.html from a different bucket to trigger a CORS error.
4. Fix the CORS error by adding the correct settings to the second bucket.

2. Setting Up the S3 Buckets

Step 1: Upload Webpage Files to S3

• Upload index.html and extra-page.html to the first S3 bucket (demo-origin).
• Access the public URL of index.html and confirm that:
  • It displays a greeting message.
  • The coffee image appears.
  • The extra page loads successfully.

Step 2: Create a Second S3 Bucket (Different Region)

• Create another S3 bucket (demo-other-origin) in a different AWS region.
• Enable static website hosting under Properties.
• Upload extra-page.html to this new bucket.
• Make the file public by adjusting the Bucket Policy.