AWS - Access to XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I have a configured CloudFront distribution with an S3 bucket origin, which generally works. But, I am receiving the below error. I understand this is a common question, but I have reviewed all the guides and several StackOverflow posts, and believe I have configured everything properly, yet, am still having the problem.

Access to XMLHttpRequest at 'https://cdn.bodes.io/img/bodes.clear.light.small.png' from origin 'https://bodes.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Following the various AWS guides, I have set the following CORS policy on the S3 bucket:

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

I have also set the following behaviors in CloudFront:

Allowed HTTP methods: GET, HEAD, OPTIONS

Cache HTTP methods: +OPTIONS

Cache policy and origin request policy - Cache policy: CachingOptimized

Origin request policy: CORS-S3Origin

Response headers policy - SimpleCORS - Allows all origins for simple CORS requests

I have also invalidated the entire Cloudfront distribution.

Any suggestions?

Answer 1

Doh! Turns out the Response headers policy needs to be:

CORS-With-Preflight

Apparently, XMLHttpRequest is part of the Preflight headers.