Amazon S3映像CORS问题

Question

＆＃39;来自原产地＆＃39; http://example.com＆＃39;被CORS政策阻止：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://example.com＆＃39;因此不允许访问。

我正在使用亚马逊cloudfront for CDN。有人可以告诉我为什么我仍然无法看到Access-Control-Allow-Origin：＆＃34; *＆＃34;？

MY S3 cors

Answer 1

这是我的设置，你需要在S3中编辑CORS以及在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>

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

您还需要将您的CDN行为Origin列入白名单

像：

Answer 2

我写这个答案是因为我被这个问题困了将近一天。

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