React(TypeScript）でS3のバケットのファイル一覧を表示したい

Question

久しぶりに質問させて頂きます。何か理解が足りてないのではないと思ってます。よろしくお願いします。

実現したいこと

React(TypeScript）でS3のバケットのファイル一覧を表示したい

前提

趣味でS3のバケットのファイル一覧をReact(TypeScript）で表示しようとしました。コードはなんとなくAIを使いながら作りました。

発生している問題・エラーメッセージ

一覧が表示されず、デベロッパーツールを見ると以下のエラーが出ている。

Access to XMLHttpRequest at 'https://s3.ap-northeast-1.amazonaws.com/' 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.

該当のソースコード

import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";
import AWS from "aws-sdk";
import { useEffect, useState } from "react";

const REGION = "ap-northeast-1"; // 例: "us-east-1"
const BUCKET_NAME = "mshiihara-test";
const OBJECT_KEY = "0ION6Ez.jpg";

const CREDENTIAL = {
  accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY || '',
  secretAccessKey: process.env.REACT_APP_AWS_SECRET_KEY || '',
};

const s3Client = new S3Client({region: REGION, credentials: CREDENTIAL});

const s3 = new AWS.S3({
  region: REGION,
  credentials:CREDENTIAL,
});

function App() {
  const [buckets, setBuckets] = useState<AWS.S3.Bucket[]>([]);

  useEffect(() => {
    s3.listBuckets(async (err, data) => {
      if (err) throw err;
      await setBuckets(data.Buckets || []);
    });
  }, []);

  return (
    <div>
      <h1>Buckets:</h1>
      <ul>
        {buckets.map((bucket) => (
          <li key={bucket.Name}>{bucket.Name}</li>
        ))}
      </ul>
    </div>
  );
}

試したこと

S3のCORSが問題と思って、以下の様に直したが改善されない。
IAMはadmin権限で、console.logにキーを出力して確認済み。
バケットポリシーも全許可

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

補足情報（FW/ツールのバージョンなど）

windows11
VScode

よろしくお願いします。

Answer 1

解決しました。コード変更したら上記CORSでも問題なかったようです。
なお、ブログ化したのでご参考まで。