7

ユーザーがアップロードした画像をぼかすためにblur.jsを使用しようとしています。Amazon S3 に画像を保存しています。正しい CORS 構成と思われるものをセットアップしましたが、画像をぼかすことができず、ブラウザーに次のエラーが表示されます。

  Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

これが私のCORS構成です：

  <?xml version="1.0" encoding="UTF-8"?>
  <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  </CORSConfiguration>

何が問題なのですか？

4

2 に答える 2

5

やったばかりです。基本的に、手順に従って S3 バケットのアクセス許可を編集し、機能させることができます。さらにヘルプが必要な場合は、下にコメントを残してください。

1) AWS マネジメント コンソールにサインインし、 https://console.aws.amazon.com/s3/で Amazon S3 コンソールを開きます。

2) [バケット] リストで、プロパティを表示するバケットを開き、[CORS 構成を追加] をクリックします。

アマゾンスクリーンショット

3) タグの間に追加したいルールを書きます<CORSConfiguration>

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

ルールの詳細については、http: //docs.aws.amazon.com/AmazonS3/latest/dev/cors.htmlをご覧ください。

4) キャンバスで使用する画像に crossorigin='anonymous' を指定します

于 2013-11-12T21:22:42.567 に答える
3

CORSサポートに必要な正しいS3エンドポイントアドレス形式を使用していない疑いがあります。

つまり、S3バケットは次の両方の形式をサポートします。

  1. http://bucket.s3.amazonaws.com/object
  2. http://s3.amazonaws.com/bucket/object

ただし、ドキュメントによると、最初のURLのみがCORSで機能します。

CORSを使用すると、website.s3-website-us-east-1.amazonaws.comからのクロスオリジンリクエストを明示的に有効にするようにバケットを設定できます。

于 2013-02-24T14:58:25.717 に答える