S3にローカルから画像アップロードしようとしてCORSエラー

お疲れ様です、ラスカルです。
今回はローカルホストからS3に画像アップロードしようとしたところ、次のようなエラーがでた時の対処法を書いていきます。

Access to XMLHttpRequest at 'https://ほにゃらら.s3.amazonaws.com/?max-keys=0' from origin 'http://localhost:3000' 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.

すべきこと

S3にCORS設定を書いてあげます。

S3 > アップロード対象のバケット > アクセス許可タブの最下部にCORS設定を記述するところがあります。

ここが空白になっていて、CORSの設定が書かれていないため、ローカルホストからのアップロードが不正なものとしてリジェクトされているようです。

「編集する」をクリックして、CORS設定を記述してあげます。
ここで注意が必要なのですが、JSONで書かないといけないのにXML形式のサンプルコードしかありません。
公式ドキュメントですらXML形式で表示しています。

🤔最近変わったのでしょうか？

JSONで書くとこのようになります。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": []
    }
]

これでCORS設定は完璧！

お疲れ様でした🎉。