aws CORSポリシーによってブロックされましたと、エラーが出てデータがS3上にアップロードされない。

Question

AWS初心者です。下記のサイトを参考にしながら設定をしたのですがうまくアップロードされません。cors設定が原因のような気がしますが。。すみませんがご助力の方宜しくお願いします。

https://www.selfree.co.jp/2015/06/18/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%B9%E3%81%A7javascript-%E3%81%A0%E3%81%91%E3%81%A7%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

エラー内容
Access to XMLHttpRequest at 'https://foliojs.s3.amazonaws.com/file1617874791820audio/mpeg' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

PUT https://foliojs.s3.amazonaws.com/file1617874791820audio/mpeg net::ERR_FAILED

コード
  <script src="https://sdk.amazonaws.com/js/aws-sdk-2.881.0.min.js"></script>

var s3_client = function() {
             AWS.config.region = "us-east-1";
             AWS.config.credentials = new AWS.CognitoIdentityCredentials({
             IdentityPoolId: "us-east-1:bc"　//仮設定
             });
             AWS.config.credentials.get(function(err) {
             if (!err) {
             console.log("Cognito Identify Id: " + AWS.config.credentials.identityId);
                               }
                                });
                           return new AWS.S3({
                           params: {
                                     Bucket: "foliojs"
                                             }
                                              });
                                                };

                                                
               var file = sliceData
               var timestamp = new Date().getTime();
               var filename = "file" + timestamp + "audio/mpeg";
               s3_client().putObject({
                                       Key: filename,
                                       ContentType: 'audio/mpeg',
                                       Body: file,
                                       ACL: "public-read"
                                                       },
                                         function(err, data) {
                                                            // if failed, alert
                                             if (data !== null) {
                                                   alert("アップロード成功!");
                                                      } else {
                                                         alert("アップロード失敗.");
                                                            }
                                                        });

コード
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example1.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://www.example2.com"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Answer 1

ログから、アップロード元のWebページが動作している（アップロード画面を表示している）URLはhttp://localhost/xxxかと思います。

S3のCORS設定で、

        "AllowedOrigins": [
            "http://www.example1.com"
        ],

としていますが、

        "AllowedOrigins": [
            "http://localhost"
        ],

に変更すると、Originが一致するのでCORSアクセスが可能となります。

CORSアクセス時はアクセス元がOriginヘッダを送信し、アクセス先がAccess-Control-Allow-Origin(や他のAccess-Control-Allow-XXX)を返します。
それぞれが、それぞれのヘッダをみてCORSアクセスが成り立つかどうかが決まるイメージです。

Comments

[fuyukixxx]

ありがとうございます。解決しました。機会があればまた宜しくお願いします。