S3クロスソースリソース共有が動作しない

Question

blur.jsを使用してユーザーのアップロードしたイメージをぼかすと、イメージがAmazon S3に保存されています。私は正しい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> 

：

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

ここに私のCORSの設定があります

何が悪いと思いますか？

Answer 1

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

すなわちS3バケットは、これらのフォーマットの両方をサポート：

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

しかし、唯一の最初のURLはdocumentationに応じCORSで動作します：

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

Answer 2

私はちょうどやりました。基本的には、S3バケットの権限を編集して作業を進めるための手順に従うことができます。それ以上の助けが必要な場合は、コメントを残しておきます。

1）AWS Management Consoleのにサインインし、バケットリストでhttps://console.aws.amazon.com/s3/

2）でのAmazon S3コンソールを開き、プロパティを表示し、「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を指定する=あなたのキャンバス