🐶
【AWS】S3にアップロード時のCORSエラー対応
背景
以下のエラーが発生した場合についての対応策です。
Access to fetch at 'https://premafans-stag.s3.amazonaws.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled
CORSとは?
CORS(Cross-Origin Resource Sharing)は、異なるオリジン間でのリソース共有を制御するセキュリティ機能です。デフォルトでは、ブラウザは異なるオリジン間でのリソースアクセスを制限します。これは、同一オリジンポリシーによって異なるオリジンからのスクリプトがデータにアクセスすることを防ぐためです。
ウェブサイト
|
| リクエストを送信
|
v
サーバー
|
| CORSポリシーをチェック
|
v
許可されていればデータを送信
エラーの原因は、リクエストに対してCORSポリシーに必要なAccess-Control-Allow-Origin
ヘッダーが設定されていないことです。このヘッダーは、サーバーがどのオリジンからのリクエストを許可するかを指定します。
解決方法
S3バケットのCORS設定を変更する
AWS S3バケットのCORS設定を変更して、リクエストを許可する必要があります。
対象のバケットの「アクセス許可」の項目をスクロールダウン
Cross-Origin Resource Sharing(CORS)を編集
CORS設定の編集
S3バケットのCORS設定を以下のように編集します。
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
+ "AllowedOrigins": [
+ "http://localhost:3000"
+ ],
"ExposeHeaders": []
}
]
この設定により、http://localhost:3000
からのリクエストが許可され、GET
メソッドが使用できるようになります。これにより、CORSエラーが解消され、ローカル環境からS3バケットにアクセスできるようになります。
Discussion