S3: No Access-Control-Allow-Origin header is present on the requested resource

Question

I've got a S3 bucket in the eu-west-1 region, let's call it my-bucket.

In that bucket there's a picture, let's call it some-file.jpg.

If I access both these urls through the browser, I can retrieve that picture (all objects in the bucket are public) (remember that these are examples, not real-life urls):

https://my-bucket.s3.amazonaws.com/some-file.jpg

https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg

However, I'm trying to get some info on that picture, and for that I'm using vibrant.js, which attempts to retrieve the file.

However, it fails when the url is: https://my-bucket.s3.amazonaws.com/some-file.jpg, with the following CORS error:

Access to Image at 'https://my-bucket.s3.amazonaws.com/some-file.jpg' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access

I've made sure that the bucket's CORS policy accepts all origins:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

My guess is that https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg sends the Access-Control-Allow-Origin and the other one doesn't. How can I solve this?

Answer 1

Did you clear your browser cache after updating the CORS headers

The problem I had was that Chrome was caching the image with the headers (not containing the CORS data), so no matter what I tried to change in AWS, I would not see my CORS headers.

After clearing Chrome cache and reloading the page, the image had the expected CORS Headers