Allow AJAX GETs from Amazon S3? (Access-Control-Allow-Origin)

Question

I\'m storing JSON objects in Amazon S3, and I\'d like to load that data directly from S3 from Javascript. My GET looks pretty generic:

$.ajax({
    \'type\':         


        

Answer 1

Searched a lot - This is the sample solution:

http://blog.bignerdranch.com/1670-upload-directly-to-amazon-s3-with-support-for-cors/

(Add cors on bucket permissions tab)

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

Answer 2

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

This CORS configuration worked like a charm

Answer 3

For anyone struggling with this issue, as others say you must force S3 to respond with CORS headers by adding these lines to your CORS configuration:

<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

BUT, you then must clear your browser file cache as the old headers on the requested resource are stored. In Chrome, find the Clear Browsing Data option and then choose to clear the file cache. A hard reload will not clear certain files. If you prefer to only clear the file cache only for the current site, this answer explains how to do just that.

This was the gotcha for me.

Answer 4

S3 now supports Cross Domain Requests using CORS file.

You can find more information here:

http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

and:

http://aws.typepad.com/aws/2012/08/amazon-s3-cross-origin-resource-sharing.html

Answer 5

We had a similar problem, but not with GET but with presigned S3 POST. I thought this may be helpful for someone googling this issue.

in some browsers Dropzone.js lib was not able to upload images directly to S3 bucket (presigned S3 POST). Weird part was that this was happening on some computers all the time and on some one out of twenty tries.

On one computer we manage to capture the error in Firefox Debugger (network tab)

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://s3-eu-west-1.amazonaws.com/pobble.com-browser-uploads-production. (Reason: CORS request failed).

Updating the S3 bucket CORS to this worked for us:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.myapp.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://www.app.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
        <ExposeHeader>Accept-Ranges</ExposeHeader>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Encoding</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
    </CORSRule>
</CORSConfiguration>

important part is the <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader> thanks to this S3 is exposing response header OPTIONS and POST

Collaborative work of @anas-alaoui, @joserose & @equivalent

Answer 6

I was struggling with the same sort of issue. only difference is i wanted to pull a file with Ajax from my S3 and load it into a site.

After a lot of searching i ended up adding this option to my Ajax request.

xhrFields: { withCredentials: true },

Worked like a charm, as long as you have the CORSConfiguration to allow all.

hope it helps.