I’m currently working on a project where I’m using AWS S3 to store static files (like images and JavaScript) and CloudFront as the CDN for serving these files to clients. However, I’m facing an issue with CORS (Cross-Origin Resource Sharing).

I need to allow my frontend (which is hosted on http://example.com) to fetch images and other resources from my CloudFront distribution (https://d1234.cloudfront.net). I’ve tried setting up CORS in my S3 bucket, but CloudFront seems to be caching the old version of the CORS headers, and some of the requests are failing with CORS policy errors.

Here’s what I’ve done so far:

Set up CORS configuration in S3 like this:

[
    {
        "AllowedHeaders": [
            "Authorization",
            "Content-Length"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

What I am missing here?

Additional Info:
Error:

Access to fetch at 'https://example.com/some-folder/image.png' from origin 'http://127.0.0.1:8001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Any help or guidance would be greatly appreciated!