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!