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

Callaghan

Did you invalidate the cache after setting up CORS? Did you whitelist the Origin and other CORS request headers in the CloudFront Cache Behavior? – Lajuanalake

Perhaps your screen shot has clipped the LHS of the config file because otherwise it looks invalid. Are you receiving only GET requests? – Linn

Michael-sqlbot : i have whitelisted Origin and other headers . still same issue is coming. CORS not aalowed. – Callaghan

@Linn yes i am receiving only get Request.But CORS not allowed. – Callaghan

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:

Drudgery

Still same issue. when i test in online CORS checking, response is like this "Fired XHR event: loadstart Fired XHR event: readystatechange Fired XHR event: progress Fired XHR event: error XHR status: 0 XHR status text: Fired XHR event: loadend" – Callaghan

@Callaghan no idea what are you talking about, but do a simple test, go to jQuery homepage and execute $.get(url,(d)=>{console.log(d);}); and set up var url = ''; with a text file url of the CDN you are testing. – Drudgery

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' },
    }
)

Cockatoo

Answer 3

We need to set CORS headers in the Permissions tab, as mentioned by Anand Tripathi in the above answer.

But also from the server side, we need to set some headers like below as mentioned in the MDN docs.

  res.header("Vary", "Origin");
  res.header("Access-Control-Allow-Origin", req.get("origin") || req.get("host"));
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Headers", "*");
  res.header("Access-Control-Allow-Methods", "*");

the above example is for NodeJs-Express.

The above headers are validated by the browser, by calling the OPTIONS rest API method, so make sure to send them in response.

Note:- res.header("Access-Control-Allow-Origin", "*") won't work, it'll result in the cors error, so we need to set the exact origin

In my case ( NodeJs-ExpressJs ), I was using like below,

const cors = (req, res, next) => {
  res.header("Vary", "Origin");
  res.header("Access-Control-Allow-Origin", req.get("origin") || req.get("host"));
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Headers", "*");
  res.header("Access-Control-Allow-Methods", "*");
  next();
};

app. use(cors);// as a middleware // the cors headers will be set in every response.

Impresa