Tal Yitzhak
Tal Yitzhak

Reputation: 129

AWS Amplify Gen 1: blocked by CORS policy: Response to preflight request doesn't pass access control check

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

Answers (0)

Related Questions