AWS S3にローカル開発環境のCORS設定を行う方法

2023/11/4 AWS, Cloud, Tips

この記事は公開から1年以上経過しています。

ローカル開発環境からAWS S3のオブジェクトに認証付きURL経由でアクセスしたとき

Access to fetch at ‘https://xxx.amazonaws.com/xxx?xxx‘ from origin ‘http://localhost:3000‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

のようなエラーが出たときの対応についての備忘録。

対応

S3のバケットのCORS設定にローカル開発環境のオリジンを設定する。

手順

AWSコンソールからAmazon S3>バケット>バケット名でバケットを表示。
アクセス許可タブページのCross-Origin Resource Sharing (CORS)欄の編集を押下。

AllowedOriginsにローカル開発環境のオリジンhttp://localhost:3000を追加。

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

本例は最低限の設定のため、他に必要な設定がある場合は適宜行ってください。

参考ウェブサイトなど

AWS ドキュメント
Amazon Simple Storage Service (S3)/ユーザーガイド/Cross−Origin Resource Sharing (CORS) の設定

以上です。