Raphi
Raphi

Reputation: 420

Client-side upload to S3. No 'Access-Control-Allow-Origin' header

I've been trying to throw together a client-side upload form for S3 based from several examples I've found but I can't seem to resolve an error I'm getting on the OPTIONS request:

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

From my understanding this should be triggered if I've failed to include a Origin header in my request, however...

Host:s3.amazonaws.com
Origin:http://localhost:3000

Anyone have an idea as to why the header might not be getting included in the response? Here's some more specifics CORS Configuration

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>http://localhost:3000</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Coffeescript

jQuery ->
 $('#fileupload').fileupload


add: (e, data) ->
  types = /(\.|\/)(gif|jpe?g|png)$/i
  file = data.files[0]
  if types.test(file.type) || types.test(file.name)
    data.context = $($.tmpl("template-upload", file))
    $('#fileupload').append(data.context)
    data.submit()
  else
    alert("#{file.name} is not a gif, jpeg, or png image file")

progress: (e, data) ->
  if data.context
    progress = parseInt(data.loaded / data.total * 100, 10)
    data.context.find('.bar').css('width', progress + '%')

done: (e, data) ->
  file = data.files[0]
  domain = $('#fileupload').attr('action')
  path = $('#fileupload input[name=key]').val().replace('${filename}', file.name)
  to = $('#fileupload').data('post')
  content = {}
  content[$('#fileupload').data('as')] = domain + path
  $.post(to, content)
  data.context.remove() if data.context # remove progress bar

fail: (e, data) ->
  alert("#{data.files[0].name} failed to upload.")
  console.log("Upload failed:")
  console.log(data)

Upvotes: 1

Views: 1505

Answers (1)

Raphi
Raphi

Reputation: 420

Welp, silly me. Was working on the wrong bucket!

Upvotes: 1

Related Questions