Amazon S3 CORS still not working: No 'Access-Control-Allow-Origin'

Question

Upon trying to load an image (with crossorigin set to anonymous) from an Amazon S3 server, we are still getting the dreaded error:

 XMLHttpRequest cannot load 
 http://resource-url No 
'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://server-url' is therefore not allowed access.

We have tried several CORS configurations, such as

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

as well as Amazon's default CORS configurations. Still, same error.

A couple of other notes:

• This issue is present in Chrome but not Firefox.
• The images are being loaded as an AFrame asset (hence the XMLHttpRequest)
• curl -XGET -H 'Origin: anonymous' http://resource-url returns what appears to be the image, starting with ?PNG
• For Chrome, here are the headers. Here is the response.
• For Firefox, here are the headers. The response is the image.
• Here are the AFrame docs on CORS. However, since the images are fetched from S3 and serving them on Github Pages is not really an option, it might not be useful.

I'm at my wit's end, so any help at all would be greatly appreciated. Thank you so much!

Answer 1

Must use JSON now:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "https://example.com"
        ],
        "ExposeHeaders": []
    }
]

Answer 2

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

After adding the above xml code, you need to invalidate the cache.

Answer 3

Possibly add <AllowedMethod>HEAD</AllowedMethod>:

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

It seems that there are pre-flight checks (for server load checks) that some modern browsers send using the HEAD method. More reading here and here.