Javaの勉強の合間にUnity製ゲームのWebGL公開の検証をやっていたのですが、その際にS3の設定で詰まっていた話です。

起きた現象

EC2でホスティングしていた自サイト側からS3のファイルをGETリクエストしようとすると失敗する。
- エラーメッセージにはCORS header 'Access-Control-Allow-Origin' missingと表示される。
S3は以下の設定である
- アクセス許可: 公開
- ブロックパブリックアクセス: パブリックアクセスをすべてブロック＝オフ
- バケットポリシー: 以下の通り

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{S3の名前}/*"
        }
    ]
}

原因

Cross-Origin Resource Sharing (CORS)でOriginに制限がかかっていた。

S3では特定ドメインを指定してアクセス制御が可能になっており、かなり前に記述した設定が残っていた為、CORSのエラーが発生していました。

実際のS3のCORS設定値

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "http://localhost*",
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]