title: all of my browsers are not sending the origin header
body: <p>I am trying to load an image into a canvas element and later pull the data out in toDataURL().</p>
  
  <p>I have my site running with Ruby on Rails 2.3</p>
  
  <p>I have my images serving from aws s3. I have setup cors:</p>
  
  <pre><code>&lt;CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"&gt;
    &lt;CORSRule&gt;
      &lt;AllowedOrigin&gt;*&lt;/AllowedOrigin&gt;
      &lt;AllowedMethod&gt;GET&lt;/AllowedMethod&gt;
      &lt;AllowedMethod&gt;HEAD&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>I have a canvas element:</p>
  
  <pre><code>&lt;canvas id="explain_canvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Okay, so some background. I was originally trying this with code like this where drawing_image is just a url to the image.</p>
  
  <pre><code>var outlineImage = new Image();
  outlineImage.crossOrigin = '';
  outlineImage.src = drawing_image;
  outlineImage.onload = function() {
    var canvas = document.getElementById('explain_canvas');
    var context = canvas.getContext("2d");
    context.drawImage(outlineImage, 10, 10, 600, 150);
  }
  </code></pre>
  
  <p>But that was not sending the origin header. So I thought I'd try an ajax call via jquery</p>
  
  <pre><code>var outlineImage = new Image();
  $(outlineImage).attr('crossOrigin', '');
  $.ajax({
      type: 'get',
      url : drawing_image,
      contentType: 'image/png',
      crossDomain: 'true',
      success: function() {
          $(outlineImage).attr("src", drawing_image);
      },
      error: function() {
          console.log('ah crap');
      }
  });
  
  outlineImage.onload = function() {
   var canvas = document.getElementById('explain_canvas');
   var context = canvas.getContext("2d");
  
   context.drawImage(outlineImage, 10, 10, 600, 150);
  }
  </code></pre>
  
  <p>But still no luck. Am I mistaken? Should that jquery ajax send the origin header?</p>
  
  <p>I look at the request header and this is what I get on the image:</p>
  
  <pre><code>Accept:*/*
  Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
  Accept-Encoding:gzip,deflate,sdch
  Accept-Language:en-US,en;q=0.8
  Connection:keep-alive
  Host:em2-images.s3.amazonaws.com
  Referer:http://localhost:3000/courses/18/quizzes/22/take
  User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11
  </code></pre>
  
  <p>And the jquery errors with this:</p>
  
  <pre><code>XMLHttpRequest cannot load http://em2-images.s3.amazonaws.com/EM2_LF_A_5_item6.png. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
  ah crap
  </code></pre>
  
  <p>What is weird to me is the jquery states the origin, yet it is not in the request header.</p>
  
  <p>This stackoverflow question <a href="https://stackoverflow.com/questions/10324924/getting-image-with-ajax-access-control-request-headers">here</a> states he wants to remove the origin header. Well he is doing the same kind of call I am with jquery ajax and getting it. Any ideas why I am not?</p>
  
  <p>If I reload the page, it grabs the cached image and loads it fine (with the origin header mind you) and calls toDataURL() just fine. After I clear the cache it again won't work that first load until the image is cached.</p>
  
  <p>I started wondering if Rails was doing something to it, but I don't see how it would since this is an ajax call. But who knows, anyone know if Rails could do this?</p>
  
  <p>I have tried this in several browsers on different platforms. Chrome, Firefox, Safari, IE 9 &amp; 10. On my Mac, PC, and iPhone. No dice on any of them.</p>
  
  <p>-Thanks-</p>