Amazon S3 图像 CORS 问题

Question

' 来自来源'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' 因此不允许访问。

我正在使用 amazon cloudfront 作为 CDN。有人可以告诉我为什么我仍然看不到 Access-Control-Allow-Origin:"*"?

我的 S3 cors

Answer 1

这是我的设置，您需要在 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 2

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

在 AWS S3 上添加 CORS 权限

打开特定的存储桶。
然后点击顶部的权限选项卡
然后滚动到最后，您会找到CORS 配置。只需单击编辑。
然后将下面的配置粘贴到

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

您还可以在 AllowedOrigin

从 API 调用中删除缓存

我已经完成了上述更改，但我仍然一次又一次地面临同样的问题。我通过禁用 API 的缓存来解决这个问题。我正在使用 fetch 调用 s3 URL。下面是它的代码。

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

Amazon S3 图像 CORS 问题

Amazon S3 image CORS issue

amazon-web-services

amazon-s3

amazon-cloudfront

在 AWS S3 上添加 CORS 权限

从 API 调用中删除缓存