ローカルスタックのS3を使って、フロントエンドから操作した時にCORSエラーが出た時の対処法 ～AWS100本ノック～ 19/100

はじめに

ローカル環境でS3を使う際にlocalstackを使いました。
ただ、フロントエンドからファイルをダウンロード/アップロードする場合、CORSのエラーが出て少し躓いたので備忘録を兼ねてやったことを記載します。

※CORSに知りたい方は、以前書いた【概要編】CORS ～AWS100本ノック～ 14/100をご確認頂ければと思います
※localstackについて詳しく知りたい方は、公式ドキュメントをご確認ください

やったこと

docker composeでlocalstackコンテナを立ち上げるには以下のようにしてください。

compose.yml

  localstack:
    image: localstack/localstack:2.0.2
    ports:
      - 4566:4566
    environment:
      AWS_ACCESS_KEY_ID: dummy
      AWS_SECRET_ACCESS_KEY: dummy
      AWS_DEFAULT_REGION: ap-northeast-1

そしたら以下のようにしてバケットを作成して、ファイルをアップロードしてみましょう

# コンテナを立ち上げ
docker compose up -d

# localstackコンテナに入る
docker compose exec localstack bash

# バケットの作成
awslocal s3 mb s3://sample-bucket

# 適当にファイル作成
touch sample.json

# ファイルのアップロード
aws s3api put-object \
  --bucket sample-bucket \
  --key file/sample.json \
  --body ./sample.json \
  --endpoint-url http://localhost:4566 \
  --region ap-northeast-1

この状態でフロントエンドからファイルをダウンロードしようとすると、以下のようなCORSエラーが出ると思います。

Access to XMLHttpRequest at 'https://s3.localhost.localstack.cloud:4566/sample-bucket/file/sample.json?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=dummy%2F20241217%2Fap-northeast-1%2Fs3%2Faws4_request&X-Amz-Date=20241217T081641Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Signature=d3895de7f1e5012348b919a304dea07028015d9bb9e5e9d3783d8e811206922f' from origin 'https://localhost:3002' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS設定を修正してみましょう。

# CORS設定を確認
awslocal s3api get-bucket-cors \
  --bucket sample-bucket

# 初期状態だと何もCORS設定がないので、下記のようなエラーになります
An error occurred (NoSuchCORSConfiguration) when calling the GetBucketCors operation: The CORS configuration does not exist

# CORS設定を追加 ※今回はゆるいCORS設定にしていますが、実際はAllowedOriginsを絞るなど適切な設定にしてください
aws --endpoint-url=http://localhost.localstack.cloud:4566 \
  s3api put-bucket-cors \
  --bucket sample-bucket \
  --cors-configuration '{
    "CORSRules": [
        {
            "AllowedHeaders": ["*"],
            "AllowedMethods": ["GET", "PUT", "POST"],
            "AllowedOrigins": ["*"],
            "ExposeHeaders": [],
            "MaxAgeSeconds": 3000
        }
    ]
}'

再度、アクセスするとファイルがダウンロードできると思います

短いですが、今回の記事は以上になります！