Resolving CORS & S3 Bucket Policy Errors in Web Apps
Tired of hitting CORS policy blocks and 403 Forbidden errors when fetching S3 assets in your React or Node apps? Here is the exact, plug-and-play JSON configuration to fix permissions and cross-origin access in 2 minutes.
If you are building a React/TypeScript web app and hitting CORS policy or 403 Forbidden errors when calling AWS API Gateway or fetching S3 assets, here is the exact 2-minute fix.
- AWS S3 CORS Configuration
Go to S3 Bucket -> Permissions -> Cross-origin resource sharing (CORS) and paste:
JSON
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "POST", "PUT"],
"AllowedOrigins": ["http://localhost:5173", "https://your-domain.com"],
"ExposeHeaders": []
}
]
2. S3 Bucket Policy for Public Read
If you need public access for assets:
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET", "POST", "PUT"],
"AllowedOrigins": ["http://localhost:5173", "https://your-domain.com"],
"ExposeHeaders": []
}
]
2. S3 Bucket Policy for Public Read
If you need public access for assets:
JSON
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/"
}
]
}
Replace YOUR-BUCKET-NAME with your actual bucket name.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/"
}
]
}
Replace YOUR-BUCKET-NAME with your actual bucket name.
If this short code snippet saved you debugging time, hit the Like button or leave a comment below!
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article