🌍 AWS S3 CORS: Allowing Your Website to Talk to S3

One of my “aha!” moments with AWS was when I hosted a static website on S3. Everything looked great—until my browser blocked requests to my S3 bucket. The error? CORS policy issue.

Let’s demystify CORS and see how to fix it in S3.

🔎 What is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security feature. It prevents a website on one domain from freely accessing resources on another domain.

Example:

• Your website is hosted on mywebsite.com.

• Your assets (images, JSON, fonts) are stored in an S3 bucket.

• Without CORS, the browser blocks access.

🛠️ Setting Up CORS on S3

Here’s how to configure it:

1. Go to your S3 bucket → Permissions tab.

2. Scroll to Cross-origin resource sharing (CORS).

3. Add a configuration like this:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET", "POST"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]

This example allows all origins to read from your bucket. For production, replace "*" with your specific domain (e.g., "https://mywebsite.com").

✅ Best Practices

• Don’t keep "*" in production—it’s too open.

• Restrict methods to only what you need (e.g., GET for images).

• Use HTTPS origins for security.

🏁 Conclusion

CORS might look intimidating at first, but it’s simply about telling browsers: “Hey, it’s okay for this website to fetch data from my bucket.”

So the next time you face that scary red CORS error, just remember: all it takes is a small JSON config in your S3 bucket!