久しぶりに質問させて頂きます。何か理解が足りてないのではないと思ってます。よろしくお願いします。
実現したいこと
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.
該当のソースコード
React(TypeScript)
1import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3"; 2import AWS from "aws-sdk"; 3import { useEffect, useState } from "react"; 4 5const REGION = "ap-northeast-1"; // 例: "us-east-1" 6const BUCKET_NAME = "mshiihara-test"; 7const OBJECT_KEY = "0ION6Ez.jpg"; 8 9const CREDENTIAL = { 10 accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY || '', 11 secretAccessKey: process.env.REACT_APP_AWS_SECRET_KEY || '', 12}; 13 14const s3Client = new S3Client({region: REGION, credentials: CREDENTIAL}); 15 16const s3 = new AWS.S3({ 17 region: REGION, 18 credentials:CREDENTIAL, 19}); 20 21function App() { 22 const [buckets, setBuckets] = useState<AWS.S3.Bucket[]>([]); 23 24 useEffect(() => { 25 s3.listBuckets(async (err, data) => { 26 if (err) throw err; 27 await setBuckets(data.Buckets || []); 28 }); 29 }, []); 30 31 return ( 32 <div> 33 <h1>Buckets:</h1> 34 <ul> 35 {buckets.map((bucket) => ( 36 <li key={bucket.Name}>{bucket.Name}</li> 37 ))} 38 </ul> 39 </div> 40 ); 41}
試したこと
S3のCORSが問題と思って、以下の様に直したが改善されない。
IAMはadmin権限で、console.logにキーを出力して確認済み。
バケットポリシーも全許可
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [], "MaxAgeSeconds": 3000 } ]
補足情報(FW/ツールのバージョンなど)
windows11
VScode
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。