How to Resolve S3 Access-Control-Allow-Origin Header Error⚓︎

Summary⚓︎

This will be a copy/paste article on how to allow Cloudflare Analytics to work properly when used with a static website hosted in S3. Although the article does not reference Cloudflare specifically, the solution does allow Cloudflare Analytics to work properly once implemented.

CORS⚓︎

If you're trying to publicly distribute files from an Amazon S3 bucket, you may have come across this error in the past:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at your-s3-bucket.com. (Reason: CORS request did not succeed).

In the new (2020) S3 interface/dashboard, you need to write the header as a JSON. This code will fix the S3 Access-Control-Allow-Origin Header, allowing for GET requests from any domain.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

This code is placed in the Cross-origin resource sharing (CORS) section of the permissions tab for your specific bucket. On the dashboard, it would look like this:

Reference⚓︎

https://isotropic.co/fix-aws-s3-access-control-allow-origin-header-error