Amazon S3 image CORS issue

Question

' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

I am using amazon cloudfront for CDN. can someone please tell me why i am still not able to see Access-Control-Allow-Origin:"*"?

MY S3 cors

Answer 1

This is my setup, you need both edit the CORS in S3 as well in the CloudFront

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

I don't know if it's part of the protocol, but it's the only way I could set up for a CORS call

you also need to whitelist the Origin of your CDN behavior

like:

Answer 2

I'm writing this answer cause I was stuck in the issue for almost a day.

Add CORS permission on AWS S3

1. Open the specific bucket.
2. Then click on the permission tab on the top
3. Then scroll to the last, and you will find the CORS configuration. Just click on edit.
4. Then paste the below configuration in

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

5. You can also add your custom domains inside AllowedOrigin

Remove cache from API call

I have done the above change but still, I was facing the same issue again and again. I fixed that by disabling the cache of the API. I was using fetch to call the s3 URL. Below is the code for it.

fetch(
    <s3 URL>,
    {
        method: 'GET',
        headers: { "Cache-Control": 'no-cache' },
    }
)