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="/">
    <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!

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!

• javascript
• amazon-web-services
• amazon-s3
• cors

• 1 Upon trying to load an image (with crossorigin set to anonymous) - can you show this code, the error message suggests you are using XMLHttpRequest not "loading an image" – Jaromanda X Commented Dec 28, 2016 at 23:05
• 3 Can you check that the request headers includes an Origin header - I've read that without an Origin header, Amazon S3 server wont respond with any CORS headers ref – Jaromanda X Commented Dec 28, 2016 at 23:10
• 1 XMLHttpRequest is sending a CORS header - not sure what you mean by this, I never said that XMLHttpRequest needs to send CORS headers ... CORS headers are RECEIVED by the client, not SENT – Jaromanda X Commented Dec 28, 2016 at 23:21
• 1 I meant a CORS header being included in the request again, CORS headers are in the response ... use the browser developer tools network tab ... check the request/response headers for the failing request ... specifically (all I could find in the documentation) check that the request headers includes an Origin header - without this, Amazon S3 wont respond with CORS response headers (as i mentioned before) – Jaromanda X Commented Dec 28, 2016 at 23:25
• 1 This issue is present in Chrome but not Firefox - ignore everything I said. The fact that it works in any browser means that the server side is correct, and the client side is at least correct in Firefox ... I'm surprised there's a difference in Chrome vs Firefox ... the page getting the resource, is it http:// as well? (not https:// for example) – Jaromanda X Commented Dec 28, 2016 at 23:34

3 Answers 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.

<?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.

Must use JSON now:

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