私のすべてのブラウザが元のヘッダーを送信していません

Question

イメージをキャンバス要素に読み込み、後でtoDataURL（）でデータを取り出しようとしています。

私は私のイメージは、AWSのS3から提供していRailsの2.3

上のRubyで実行されている、私のサイトを持っています。

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

わかりましたので、いくつかの背景：

<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> 

私はcanvas要素を持っている：私は、セットアップCORSを持っています。私はもともと、このようなコードでこれを試していました。ここで、drawing_imageは画像のURLです。

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

しかし、発信元ヘッダーは送信されませんでした。だから私はjqueryを使ってajax呼び出しを試みると思った。

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

まだ運がない。私は間違っていますか？そのjquery ajaxは元のヘッダーを送信する必要がありますか？

私がリクエストヘッダを見て、これは私が画像の上に得るものです：これで

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 

とjQueryのエラー：

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 

何私には奇妙であることはjqueryの状態であります原点ですが、リクエストヘッダーにはありません。

このスタックオーバーフローの問題hereは、元のヘッダーを削除したいと述べています。まあ、彼はjquery ajaxと同じ種類の呼び出しをして、それを取得しています。私がなぜそうでないのか？

ページをリロードすると、キャッシュされたイメージを取得して元のヘッダーを気にして読み込み、DataURL（）を呼び出しても問題ありません。キャッシュをクリアした後は、画像がキャッシュされるまで最初のロードが再び機能しません。

私はRailsが何かをしているのか疑問に思っていましたが、これはAjaxコールなのでどのように見えるのでしょうか。しかし、誰が知っている、誰もがこれを行うことができますか？

私はさまざまなプラットフォームのいくつかのブラウザでこれを試しました。 Chrome、Firefox、Safari、IE 9 & 10. Mac、PC、およびiPhoneの場合。いずれにもサイコロはありません。多くの脳スマッシング後

-Thanks-

Answer 1

私のブラウザが原点ヘッダを送信していない理由を、私は考え出しました。

まずは少し背景。これはLMS用であり、クイズの一部です。教師がクイズを作成すると、質問テキストと画像を追加して、生徒が図面を使って答えを説明するために、図キャンバスに移動します。

あなたが推測できるように、そのイメージが最初に読み込まれます。これは学生ビューからは隠されています。その画像からsrc URLを取得し、javascriptを使用してキャンバス要素に配置しようとします。

よく問題になるのは、イメージが初めて読み込まれたときにcrossorigin属性が読み込まれないことです。したがって、起点ヘッダーはありません。そして、キャンバス要素がイメージを読み込もうとする時に、そこに原点ヘッダーを持たずにキャッシュされます。そしてそれはそれがbarfs行くcorsを取得しようとするとき。多分、これはすべてのブラウザが修正する必要があるバグだと私には思われます。しかしおそらくそうではありません。

ナッツシェルでは、corsを実行するときに、画像の最初の読み込みにcrossorigin属性が含まれていることを確認して、元のヘッダーを含めるようにしてください。 ...

うん、リファクタリングのための時間...

Answer 2

私はこのCORSのエラーを得ていた私をDUR、およびサーバーで原点ヘッダが送信されていませんでした終了します。

私の問題は、画像タグにcrossOrigin = Anonymousを設定していたことでした。それを取り除くことで私の問題は解決し、CORSエラーは解消されました。