Question

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

在那个桶中有一张图片，我们称之为some-file.jpg。

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

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

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

但是，我正在尝试获取该图片的一些信息，为此我正在使用vibrant.js，它试图检索文件。

但是，当网址为：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而另一个不发送<img alt="Embedded Image" src={`data:image/png;base64,${i.preview}`} />。我该如何解决这个问题？

Answer 1

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

我遇到的问题是 Chrome正在使用标头（不包含CORS数据）缓存图像，因此，无论我在AWS中尝试进行什么更改，我都不会看到我的CORS标头

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

Answer 2

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

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

这看起来像是一个黑客，但对我来说很完美。

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

2 个答案: