title: Client-side upload to S3. No 'Access-Control-Allow-Origin' header
body: <p>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:</p>
  
  <pre><code>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. 
  </code></pre>
  
  <p>From my understanding this should be triggered if I've failed to include a Origin header in my request, however...</p>
  
  <pre><code>Host:s3.amazonaws.com
  Origin:http://localhost:3000
  </code></pre>
  
  <p>Anyone have an idea as to why the header might not be getting included in the response? Here's some more specifics
  CORS Configuration</p>
  
  <pre><code>&lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
  &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;http://localhost:3000&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;POST&lt;/AllowedMethod&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;MaxAgeSeconds&gt;3000&lt;/MaxAgeSeconds&gt;
      &lt;AllowedHeader&gt;*&lt;/AllowedHeader&gt;
  &lt;/CORSRule&gt;
  &lt;/CORSConfiguration&gt;
  </code></pre>
  
  <p>Coffeescript</p>
  
  <pre><code>jQuery -&gt;
   $('#fileupload').fileupload
  
  
  add: (e, data) -&gt;
    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) -&gt;
    if data.context
      progress = parseInt(data.loaded / data.total * 100, 10)
      data.context.find('.bar').css('width', progress + '%')
  
  done: (e, data) -&gt;
    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) -&gt;
    alert("#{data.files[0].name} failed to upload.")
    console.log("Upload failed:")
    console.log(data)
  </code></pre>