I need to get retrieve some publicly accessible files from S3.

That's my S3 CORS configuration:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

And here's my JS code:

const response = await fetch(url, {
    mode: 'cors',
});

const blob = await response.blob();

It works, but not always. Sometimes I have the following error in the console:

Access to XMLHttpRequest at 'https://my-bycketuel/file.jpg' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But after I reload the page (sometimes several times, sometimes just once) then the error is gone and I'm able to read the response object.

I need to get retrieve some publicly accessible files from S3.

That's my S3 CORS configuration:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws./doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

And here's my JS code:

const response = await fetch(url, {
    mode: 'cors',
});

const blob = await response.blob();

It works, but not always. Sometimes I have the following error in the console:

Access to XMLHttpRequest at 'https://my-bycketuel/file.jpg' from origin 'https://my.host' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But after I reload the page (sometimes several times, sometimes just once) then the error is gone and I'm able to read the response object.

• javascript
• ajax
• amazon-web-services
• amazon-s3
• cors

• You need to whitelist {my-bycketuel / *} on {my.host}. And that way issue would be resolved for you forever. It is cross platform access issue. Should be easy. – Kunal Vohra Commented Mar 14, 2019 at 9:12
• Another remended way is you can use reverse proxy to resolve issue. – Kunal Vohra Commented Mar 14, 2019 at 9:15

2 Answers 2

OP here.

I was looking at successful and unsuccessful requests in Chrome dev tools. I found that unsuccessful requests have Status code of: 200 OK (from disk cache) when successful requests have Status code of: 200 OK

When I disable caching using cache: 'no-cache' then the problem is gone.

const response = await fetch(url, {
    method: 'GET',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
        Origin: window.location.origin,
    },
});

I still don't understand why would cached request suffer from CORS issues, but at least I found a solution - or rather a workaround.

// EDIT:

I found I'm not alone: Cached non CORS response conflicts with new CORS request

It seems that you are missing the

<AllowedMethod>Head</AllowedMethod>

on your config file.

I expect that is the reason you are having issues.

Make sure on Allowed Http Methods you chose Get,Head,Options as well include the Access-Control-Allow-Methods, Access-Control-Allow-Origin and Origin on your white list

Try that!

Good Luck