🪣

AWS SDK for JavaScript が web フロントから S3 アクセスする際に CORS エラーを起こす

2024/09/28に公開

概要

このへんのサンプルコードを試す際に、手順通り行ってもローカル起動した Node サーバで建てた web フロントから S3 に対するコマンドが CORS エラーで失敗してしまう
- https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/getting-started-browser.html
- https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects
S3 バケット単位で CORS ヘッダの設定が可能であるが、公式のサンプル通り設定しても依然として CORS エラーが発生し続ける

[
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "*"
    ],
    "ExposeHeaders": []
  }
]

参考 https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v3/developer-guide/getting-started-browser.html

修正方法

AllowedOrigins のワイルドカードが PORT に及ばないのが原因
例えば上記サンプルコードの vite サーバの場合 PORT 5173 で起動するため、以下のように PORT 指定した AllowedOrigins を追加すれば OK

...(略)...
    "AllowedOrigins": [
      "*",
      "*:5173"
    ],
...(略)...

もちろん wildcard 表記せずに http://localhost:5173/ を直接追加しても OK

その他

ドキュメントに載ってますこの仕様？私には見つけられませんでした

Discussion