S3：请求的资源上不存在 Access-Control-Allow-Origin 标头

Posted 2023-03-04

【中文标题】S3：请求的资源上不存在 Access-Control-Allow-Origin 标头

【英文标题】：S3: No Access-Control-Allow-Origin header is present on the requested resource

【发布时间】：2018-06-20 02:00:04

【问题描述】：

我在 eu-west-1 区域中有一个 S3 存储桶，我们称之为 my-bucket。

在那个桶里有一张照片，我们叫它some-file.jpg。

如果我通过浏览器访问这两个 url，我可以检索到该图片（存储桶中的所有对象都是公开的）（请记住，这些是示例，而不是真实的 url）：

https://my-bucket.s3.amazonaws.com/some-file.jpg

https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg

但是，我正在尝试获取有关该图片的一些信息，为此我使用了充满活力的.js，它会尝试检索文件。

但是，当 url 为：https://my-bucket.s3.amazonaws.com/some-file.jpg 时，它会失败，并出现以下 CORS 错误：

Access to Image at 'https://my-bucket.s3.amazonaws.com/some-file.jpg' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access

我已确保存储桶的 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>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

我的猜测是https://s3-eu-west-1.amazonaws.com/my-bucket/some-file.jpg 发送Access-Control-Allow-Origin 而另一个没有。我该如何解决这个问题？

【问题讨论】：

问题可能不在于 URL——这可能是巧合。如果您清除浏览器的缓存，您应该会发现它们的行为相同，并且都不起作用。 S3 历来有一个问题，当您像这样两次请求对象时会出现问题，一次来自 html，一次来自 javascript，在 serverfault.com/a/856948/15316 中有更完整的描述。该问题提到了 CloudFront，但问题的出现与您是否使用 CloudFront 无关。

【参考方案1】：

更新 CORS 标头后是否清除了浏览器缓存

我遇到的问题是 Chrome 正在缓存带有标头的图像（不包含 CORS 数据），所以无论我尝试在 AWS 中更改什么，我都看不到我的 CORS 标头.

清除 Chrome 缓存并重新加载页面后，图像具有预期的 CORS 标头

【讨论】：

我遇到了这个问题，并通过删除所有缓存的 IndexedDB 实例来解决它。这种方法的灵感来自这个答案。

它对我有用。这对我来说是一个很难发现的问题

【参考方案2】：

尝试通过 CORS 代理运行镜像。

fetch('https://cors.now.sh/https://my-bucket.s3.amazonaws.com/some-file.jpg')
  .then(console.log)
  .catch(console.error)

这看起来像个 hack，但对我来说效果很好。