【AWS】S3にアップロード時のCORSエラー対応

背景

以下のエラーが発生した場合についての対応策です。

Access to fetch at 'https://premafans-stag.s3.amazonaws.com/' 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

CORSとは？

CORS（Cross-Origin Resource Sharing）は、異なるオリジン間でのリソース共有を制御するセキュリティ機能です。デフォルトでは、ブラウザは異なるオリジン間でのリソースアクセスを制限します。これは、同一オリジンポリシーによって異なるオリジンからのスクリプトがデータにアクセスすることを防ぐためです。

ウェブサイト
  |
  | リクエストを送信
  |
  v
サーバー
  |
  | CORSポリシーをチェック
  |
  v
許可されていればデータを送信

エラーの原因は、リクエストに対してCORSポリシーに必要なAccess-Control-Allow-Originヘッダーが設定されていないことです。このヘッダーは、サーバーがどのオリジンからのリクエストを許可するかを指定します。

解決方法

S3バケットのCORS設定を変更する

AWS S3バケットのCORS設定を変更して、リクエストを許可する必要があります。

対象のバケットの「アクセス許可」の項目をスクロールダウン

Cross-Origin Resource　Sharing(CORS)を編集

CORS設定の編集

S3バケットのCORS設定を以下のように編集します。

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

この設定により、http://localhost:3000からのリクエストが許可され、GETメソッドが使用できるようになります。これにより、CORSエラーが解消され、ローカル環境からS3バケットにアクセスできるようになります。