I’ll introduce CORS handling for direct file upload from web browsers to Amazon S3.
Background: CORS Error When Uploading Files to S3
Access to fetch at 'https://xxx.s3-ap-northeast-1.amazonaws.com/xxx' from origin 'https://your-site.example.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This error occurred, so I changed the S3 settings and successfully resolved it.
Cross-Origin Resource Sharing (CORS) Configuration Example
[
{
"AllowedHeaders": [
"Content-Type",
"Origin"
],
"AllowedMethods": [
"GET",
"PUT"
],
"AllowedOrigins": [
"https://your-site.example.com"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
That’s all from the Gemba about CORS handling for direct file upload from web browsers to Amazon S3.