Amazon S3 映像 CORS 问题

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

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.