CORS errors on Chrome when downloading S3 signed content

Question

I have a React codebase which tries to download a file using a signed url from S3.  The code is working well on **Firefox, Safari and Chrome(Incognito mode),** but it fails on *Chrome (regular mode) and Microsoft Edge*. This is the code

```
const myUrl = "https://s3.us-east-2.amazonaws.com/..."
const response = await fetch(myUrl);
const blob = await response.blob();
```
This is the issue

![CORS Error on Network tab from Chrome](/media/postImages/original/IMKyy3eEdKRZSWYeaC4bLbNQ)

This is my S3 bucket policy

```
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*",
            "https://my-platform.com"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]
```

How can I solve this issue?

Answer

The issue you are experiencing is because Chrome, as a security measure, performs an HTTP call with the OPTIONS method before making a GET or POST request. With this call, it checks that CORS is correct, and if it is, it then proceeds to make the GET or POST call.

Authorize your bucket to allow calls with the OPTIONS method, and it should start working in Chrome.

CORS errors on Chrome when downloading S3 signed content

相關內容