質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1058閲覧

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

mike2mike4

総合スコア901

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/05/08 10:03

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

実現したいこと

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

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

投稿2023/05/17 06:47

mike2mike4

総合スコア901

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問