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

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>

Answer 2

Your question seems very similar to a problem I had, which was never properly (precisely) answered either and seemed to be an issue related to a browser limitation instead of the actual transfer technology behind it.
Here's a link to my original question and the answers I received here on SO:
Why Doesn't Microsoft Skydrive Download Multiple Files via API?
Hopefully this may offer some insight into your problem and isn't just noise.