9

' 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

enter image description here

4
  • Did you invalidate the cache after setting up CORS? Did you whitelist the Origin and other CORS request headers in the CloudFront Cache Behavior? Apr 26, 2018 at 0:14
  • Perhaps your screen shot has clipped the LHS of the config file because otherwise it looks invalid. Are you receiving only GET requests?
    – mhawke
    Apr 26, 2018 at 0:19
  • Michael-sqlbot : i have whitelisted Origin and other headers . still same issue is coming. CORS not aalowed.
    – Venkatesh
    Apr 27, 2018 at 11:44
  • @mhawke yes i am receiving only get Request.But CORS not allowed.
    – Venkatesh
    Apr 27, 2018 at 11:46

3 Answers 3

19

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 enter image description here
  3. Then scroll to the last, and you will find the CORS configuration. Just click on edit. enter image description here
  4. Then paste the below configuration in
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]
  1. 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' },
    }
)
6

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:

enter image description here

2
  • 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"
    – Venkatesh
    Apr 27, 2018 at 11:43
  • @Venkatesh 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.
    – balexandre
    Apr 27, 2018 at 19:49
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.