Amazon S3 映像 CORS 问题

Question

来自源“

http://example.com”的“”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问来源“http://example.com”。

我正在使用亚马逊 Cloudfront 作为 CDN。有人可以告诉我为什么我仍然看不到 Access-Control-Allow-Origin:"*" 吗？

我的 S3 Cors

Answer 1

我写这个答案是因为我被这个问题困扰了几乎一天。

在 AWS S3 上添加 CORS 权限

1. 打开特定桶。
2. 然后点击顶部的权限选项卡
3. 然后滚动到最后，您将找到 CORS 配置。只需点击编辑即可。
4. 然后将以下配置粘贴到

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

5. 您还可以在AllowedOrigin中添加自定义域

从 API 调用中删除缓存

我已经完成了上述更改，但我仍然一次又一次面临同样的问题。我通过禁用 API 缓存解决了这个问题。我使用

fetch

来调用 s3 URL。下面是它的代码。

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

Answer 2

这是我的设置，您需要在 S3 以及 CloudFront 中编辑 CORS

<?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>

我不知道它是否是协议的一部分，但这是我设置 CORS 调用的唯一方法

您还需要将您的 CDN 行为

Origin

列入白名单

喜欢：

Answer 3

我们需要在 Permissions 选项卡中设置 CORS 标头，如上面答案中的 Anand Tripathi 所提到的。

但同样从服务器端，我们需要设置一些标头，如下所示，如 MDN 文档中所述。

  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", "*");

以上示例适用于 NodeJs-Express。

上述标头由浏览器通过调用 OPTIONS Rest API 方法进行验证，因此请确保在响应中发送它们。

注意：- res.header("Access-Control-Allow-Origin", "*") 不起作用，它会导致 cors 错误，所以我们需要设置确切的原点

就我而言（NodeJs-ExpressJs），我使用如下所示，

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.

Answer 4

即使在正确设置 CORS 并在标头请求中添加

Cache-controle

和

pragma

后，我也遇到了同样的问题，为我解决了这个问题

 const response = await fetch(`s3bucketurl`, {
        headers: {
            "Cache-Control": "no-cache",
             Pragma: "no-cache",
        }
    });