alle meine Browser sind nicht das senden der origin-header

Ich versuche, laden Sie ein Bild in ein canvas-element und später ziehen Sie die Daten aus, die in toDataURL().

Habe ich meine Website läuft mit Ruby on Rails 2.3

Ich habe meine Bilder dienen von aws s3. Ich habe setup cors:

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

Ich habe ein canvas-element:

<canvas id="explain_canvas"></canvas>

Okay, so einige Hintergrundinformationen. Ich war ursprünglich der Versuch, dieses mit code wie diesem, wo drawing_image ist nur eine url zu dem Bild.

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);
}

Aber das war nicht das senden der origin-header. Also ich dachte, ich würde versuchen einen ajax-Aufruf mittels jquery

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);
}

Aber noch kein Glück. Bin ich Irre? Sollte das jquery-ajax senden Sie den origin-header?

Schau ich mir die request-header, und dies ist, was ich auf dem Bild:

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

Und der jquery Fehler auf dieser:

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

Was seltsam ist, ist mir das jquery-Staaten, die Herkunft, noch ist es nicht in der request-header.

Dieser stackoverflow-Frage hier Staaten, die er entfernen will, der origin-header. Auch er macht die gleiche Art von Ruf bin ich mit jquery, ajax und bekommen es. Irgendwelche Ideen, warum ich nicht?

Wenn ich die Seite neu laden, packt Sie das zwischengespeicherte Bild und lädt es in Ordnung (mit den origin-header, wohlgemerkt), und fordert toDataURL() einfach nur gut. Nachdem ich den cache löschen es wieder nicht funktionieren, dass zuerst laden, bis das Bild gespeichert ist.

Ich begann mich zu Fragen, wenn die Schienen schon etwas zu es, aber ich weiß nicht, wie es wäre, da dies ist ein ajax-call. Aber wer weiß, wer weiß, wenn Schienen dies tun könnte?

Ich habe versucht, dies in mehreren Browsern auf verschiedenen Plattformen. Chrome, Firefox, Safari, IE 9 & 10. Auf meinem Mac, PC und iPhone. Keine Würfel auf einer von Ihnen.

-Dank-