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

【问题标题】：S3: No Access-Control-Allow-Origin header is present on the requested resourceS3：请求的资源上不存在 Access-Control-Allow-Origin 标头
【发布时间】：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 无关。

标签： javascript amazon-s3 cors

【解决方案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，但对我来说效果很好。

【讨论】：