Blogs by Jay Tillu

Understanding CORS in Amazon S3

·

4 min read

Cover Image for Understanding CORS in Amazon S3

Arjun was testing his static website hosted on Amazon S3. Everything looked good… until he noticed his product images weren’t loading. Confused, he opened the browser console.

"Access to image at ‘https://assets.mybucket.com/coffee.jpg’ from origin ‘https://mywebsite.com’ has been blocked by CORS policy."

“CORS? What’s that?” Arjun muttered.

Let’s walk through Arjun’s discovery of CORS — something you absolutely need to know for the AWS SAA exam(and real-world cloud work!).


🌍 What is CORS?

CORS stands for Cross-Origin Resource Sharing.

It’s a security feature built into web browsers. Its job? To control how resources are shared across different origins.

🧠 But what's an origin?

An origin is defined by:

  • Scheme (Protocol) – e.g., http or https

  • Host (Domain) – e.g., www.example.com

  • Port – e.g., 443 for HTTPS

So for the URL https://www.example.com, the origin is:

  • Scheme: https

  • Host: www.example.com

  • Port: 443

If any of these differ, it’s a different origin.


🧱 Why is CORS Needed?

Let’s say Arjun’s site is hosted at:

🔗 https://www.mywebsite.com
But
the product images are stored in another S3 bucket served via:
🔗 https://assets.mybucket.com

Now, when the browser loads index.html from www.mywebsite.com, it sees <img src="https://assets.mybucket.com/coffee.jpg">.

At this point, the browser says:

"Hold on! That’s a cross-origin request. I need to ask the target server if this is allowed."

This is where CORS headers come in.


🔄 The CORS Flow (Made Easy)

Let’s follow the steps:

  1. Browser loads HTML from Origin A (mywebsite.com)

  2. HTML asks for an image from Origin B (assets.mybucket.com)

  3. Browser sends a preflight OPTIONS request to Origin B:

    • Includes the Origin header

    • Asks: "Can I fetch resources from you?"

  4. If the server responds with proper CORS headers, the browser proceeds.

  5. If not, 🚫 the browser blocks the request.

✅ A valid CORS response includes:

Access-Control-Allow-Origin: https://www.mywebsite.com
Access-Control-Allow-Methods: GET, PUT, POST

Or for wider access:

Access-Control-Allow-Origin: *

🪣 Applying This to Amazon S3

S3 does not automatically allow cross-origin requests between buckets or domains — even if both buckets are yours.

So Arjun had:

  • One S3 bucket with index.html

  • Another S3 bucket with images/coffee.jpg

When his browser tried to load the image, S3 blocked it, because it didn’t have the CORS configuration.


🧠 AWS SAA Exam Tip

  • CORS is only relevant to browsers, not server-to-server or CLI interactions.

  • If you see a question about loading static content from an S3 bucket into another website, and it mentions Access-Control headers, it's a CORS question.

  • You must configure CORS rules on the target S3 bucket (the one storing the asset).


🔐 Final Thoughts: What Arjun Learned

✅ CORS is a browser-based security feature — not an AWS service.
✅ It's enforced by browsers to protect users from untrusted content.
✅ In AWS S3, you must explicitly configure CORS policies for cross-origin requests.
✅ This is a very common SAA exam topic, especially in questions about static websites and S3 object access.


More AWS SAA Articles

Follow me for more such content