15

したがって、AWSS3バケットにcorsを設定しています。

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

私のhtmlで

<div id="explain_canvas"></div>

私のJavaScriptでは、画像を読み込んでキャンバス画像に配置しています。

var outlineImage = new Image();
outlineImage.crossOrigin = '';
outlineImage.src = drawing_image;
outlineImage.onload = function() {
  var canvasDiv = document.getElementById('explain_canvas');
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', 722);
  canvas.setAttribute('height', 170);
  canvas.setAttribute('id', 'canvas_'+canvas_element);
  canvas.setAttribute('name', 'canvas_'+canvas_element);
  canvasDiv.appendChild(canvas);
  if(typeof G_vmlCanvasManager != 'undefined') {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  var context = canvas.getContext("2d");
  context.drawImage(outlineImage, 10, 10, 600, 150);
}

Internet Explorerと互換性を持たせるために、そのようなコンテキストを読み込んでいます。

これが私の問題です。ページが最初の2回読み込まれると、次のエラーが発生します。

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

ただし、ページを数回リロードすると、最終的には機能し、画像がロードされます。完了すると、canvas要素でtoDataURL（）を正常に呼び出すことができます。

なぜこれが起こるのか誰かが知っていますか？間違えましたか？これはAWSの問題であり、Amazonがcorsを修正するのを待つ必要がありますか？

これは、私がテストしたすべてのブラウザーで発生しています。Chrome、Firefox、Safari、IE。私のMac、PC、iPhoneで。ですから、ブラウザに関連しているとは思いません。また、それはローカルおよび本番環境で発生します。

ありがとう！

4

1 に答える 1

9

どうやら、ブラウザはリクエストヘッダーでオリジンヘッダーを送信していません。また、awsではオリジンを送信する必要があります。なぜそうなるのかわかりません。オリジンヘッダーは、単純なHTTPリクエストでも送信される必要があります。残念ながら、そうではありません。

そして、これがオリジンヘッドが送られない理由です。

于 2013-01-09T04:50:01.177 に答える