Reputation: 129
I have an amplify application; that upload files to S3 bucket. It worked at the beginning until I'm starting to see errors on CORS Put requests to the s3 bucket on the Chrome console:
Access to XMLHttpRequest at 'https://amplify-ofmawsdemoenhanced-dev-5108d-deployment.s3-accelerate.amazonaws.com/protected/us-east-1%3A93917646-c46b-c854-715c-ca720df5970f/normalpicture3.png?x-id=PutObject' from origin 'https://dev.d3n4udsohd43rt.amplifyapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
The relevant code which is failing:
async function onChange(e) {
if (props.onChange) {
await props.onChange(e);
}
setProgress(0);
const file = e.target.files[0];
setFilename(file.name);
try {
var response = await Storage.put(file.name, file, {
progressCallback(progress) {
setProgress(progress.loaded * 100 / progress.total);
},
level: props.level,
useAccelerateEndpoint: true,
region: "us-east-1",
bucket: "amplify-ofmawsdemoenhanced-dev-5108d-deployment"
});
setUploaded(true);
} catch (error) {
console.log("Error uploading file: ", error);
}
var responseIdentify = await onIdentify(file);
var responseInterpret = await onInterpret(responseIdentify.text.fullText);
}
But I do seem to have the right CORS configuration on the bucket:
aws s3api get-bucket-cors --bucket amplify-ofmawsdemoenhanced-dev-5108d-deployment
{
"CORSRules": [
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"Access-Control-Allow-Origin",
"Access-Control-Allow-Methods",
"Access-Control-Request-Headers",
"Access-Control-Request-Method",
"Origin"
]
}
]
}
Tried to troubleshoot different configurations, re-running the app.
Upvotes: 0
Views: 43