We have:

1. S3 Bucket with CORS settings

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "POST",
            "HEAD",
            "PUT",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Authorization"
        ]
    }
]

2. Presigning POST python code

return self._client.generate_presigned_post(
            bucket_name or self._bucket_name,
            str(self._s3_bucket_root / full_path),
            Fields={
                'ACL': 'public-read'
            },
            Conditions=[{
                'ACL': 'public-read'
            }],
            ExpiresIn=ttl or self._default_s3_file_ttl
        )

3. React part where we get the error

                Object.keys(signature).forEach((key) => {
                    formData.append(key, signature[key]);
                })
                formData.append('files', file, file.filename);
                console.log('pureApolloClient.mutate // formData', formData);
                
                axios.post(
                    url,
                    formData,
                    {
                        headers: {'Content-Type': 'application/octet-stream'}
                    }
                );

4. Firefox: on http://localhost:3000 console error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://hr-eco-bucket.s3.amazonaws.com/. (Reason: CORS request did not succeed).

I can't figure out what's wrong for about a week. CORS is set to maximum access and I should get no errors

UPD 1: Uploading with the Presigned URL works perfectly with python tests

    signature = uploader.generate_presigned_url(fv.id, submission_uuid, submission_filename)

    resp = requests.post(
        signature['url'],
        data=signature['fields'],
        files={'file': (submission_filename, file_content)}
    )
    pdb.set_trace()
    assert resp.status_code == 204

    file_resp = requests.get(
        f'https://hr-eco-bucket.s3.eu-central-1.amazonaws.com/client-upload/vacancy/{fv.id}/submission/{submission_uuid}/{submission_filename}'
    )
    assert file_resp.content == file_content

UPD 2: I'm not sure how these screenshots can help.

CodePudding user response：

Switch off from AWS and try another cloud solutions. If there is an error that can not be resolved clearly with documentation or guides, then the service should not be used.

UPD: It's really sad to tell it, but I've tried GCP Storage and it worked. No headache, I've just set CORS headers, set bucket policy and all the codebase and settings above, except the AWS ones, worked well with GCP. I hope here will be another answers – I can't beleive S3 just can't be set up to work with CORS a simple way.