S3: No 'Access-Control-Allow-Origin' for AJAX POST

Question

This issue is driving me a little nuts. I'm trying to upload files via AJAX POST to an S3 bucket.

I have all the credentials correct because when I do normal HTTP POSTs it creates the resource in the S3 bucket just fine. But I would really like to upload multiple file at once with progress bars, hence I need AJAX.

I have CORS setup on my S3 bucket:

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

Right now I'm just trying to get it working in my development environment (localhost:3000, using standard Rails 4.1).

From my understanding, the above CORS rule should allow AJAX requests from localhost:3000 to the S3 bucket.

However, every time I submit a file via AJAX, I get the following error:

XMLHttpRequest cannot load https://s3.amazonaws.com/<BUCKET>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

This doesn't make any sense to me because localhost:3000 IS granted access via the CORS rule.

I've also provided a snippet of the JS I used to submit the form:

  $.ajax({
    method: "POST",
    crossDomain: true,
    url: "https://s3.amazonaws.com/<BUCKET>",
    data: $(this).serialize() # Contains S3 necessary values
  })

The form has inputs for the Amazon S3 keys/etc necessary. I know they work because when I do normal HTTP POSTs it creates the asset properly in S3. All I'm trying to do is AJAXify the process.

Am I missing something obvious here?

Using: Rails 4.1, jquery-file-upload, fog gem (for S3)

Answer 1

you can try by changing

<?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>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>