CODEWITHSUNDEEP
ajaxamazon-s3corsjquery-file-upload
Dan L
Dan L

Reputation: 4439

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

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)

Upvotes: 15

Views: 3789

Answers (2)

raddevus
raddevus

Reputation: 9077

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.

Upvotes: 0

faraaz
faraaz

Reputation: 124

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>

Upvotes: 1

Related Questions