Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 300
hyperdo Avatar asked Dec 28 '16 22:12

hyperdo


People also ask

How do I fix not allowed by Access-Control allow origin?

In that case you can change the security policy in your Google Chrome browser to allow Access-Control-Allow-Origin. This is very simple: Create a Chrome browser shortcut. Right click short cut icon -> Properties -> Shortcut -> Target.

How do I fix CORS header Access-Control allow Origin missing?

If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value. You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs.

How do I fix a CORS issue in AWS?

Cross-Origin Resource Sharing (CORS) errors occur when a server doesn't return the HTTP headers required by the CORS standard. To resolve a CORS error from an API Gateway REST API or HTTP API, you must reconfigure the API to meet the CORS standard.


1 Answers

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.

like image 142
David Lemayian Avatar answered Sep 29 '22 15:09

David Lemayian