在 S3 上启用 CORS 时遇到问题

Posted 2023-03-04

【中文标题】在 S3 上启用 CORS 时遇到问题

【英文标题】：Trouble Enabling CORS on S3

【发布时间】：2012-09-30 12:35:25

【问题描述】：

我在 S3 存储桶上设置了 CORS，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

这是 AWS 控制台的屏幕截图：https://dzwonsemrish7.cloudfront.net/items/341y0o1n1X2a0O1X2s38/Screen%20Shot%202012-10-09%20at%209.59.44%20PM.png?v=2478ad83

当我将我的color-thief javascript 指向托管在同一域上的图像时，一切都是works as expected，但是当我指向我的 S3 存储桶中的资产时，无论我是否从 localhost 运行我的脚本，lvh.me （指向 127.0.0.1），或者来自真正的互联网，我在 Chrome 22 中遇到这样的错误：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

这在 Firefox 15 中：

SecurityError: The operation is insecure.

以下是 Google Chrome 网络检查器中标头的外观：

Request URL:https://s3.amazonaws.com/assets-zeke.heroku.com/addons-zeke.heroku.com/catalogs/58/original.png
Request Method:GET
Status Code:304 Not Modified

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:s3.amazonaws.com
If-Modified-Since:Tue, 09 Oct 2012 22:52:57 GMT
If-None-Match:"6de1a52294934c5e288894b84100d99b"
Referer:http://localhost:5000/marketplace/addons/sendgrid/edit
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (Khtml, like Gecko) Chrome/22.0.1229.79 Safari/537.4

Response Headers
HTTP/1.1 304 Not Modified
x-amz-id-2: qGvoGlvpKeSSzelanWsIPDF3zd5wQzHTr27NZoUbhNqAM1QzmKcWHnTqIkKVxF/m
x-amz-request-id: FD24FB8CA244E327
Date: Wed, 10 Oct 2012 05:20:53 GMT
Last-Modified: Tue, 09 Oct 2012 22:52:57 GMT
ETag: "6de1a52294934c5e288894b84100d99b"
Server: AmazonS3

这是在我将 URL 结构更改为 bucket.s3.amazonaws.com（并删除句点）后标题的样子 来自我的存储桶名称。

Request URL:http://assets-zeke.s3.amazonaws.com/addons-zeke.heroku.com/catalogs/58/original.png
Request Method:GET
Status Code:200 OK
Request Headers

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Host:assets-zeke.s3.amazonaws.com
Pragma:no-cache
Referer:http://lvh.me:5000/marketplace/addons/airbrake/edit
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

Response Headers
Accept-Ranges:bytes
Content-Length:6696
Content-Type:image/png
Date:Wed, 10 Oct 2012 17:56:17 GMT
ETag:"6de1a52294934c5e288894b84100d99b"
Last-Modified:Wed, 10 Oct 2012 17:50:38 GMT
Server:AmazonS3
x-amz-id-2:UGVKQ9VQbJ82DLDxR53uDP0ZUMgla+e0GU5vO9yLr6MsY8wijl9KnM7fOyDlT+ta
x-amz-request-id:8A16CF1E02A0106C

我不应该在这里看到Access-Control-Allow-Origin: * 吗？ 304 是否意味着亚马逊正在缓存响应？

【问题讨论】：

找到解决方案了吗？我遇到了同样的问题。如果您能更新答案，将不胜感激。

【参考方案1】：

这可能是由于在加载之前您的图像元素中没有 enabled CORS：

imgEl.crossOrigin = '';

【参考方案2】：

请求网址：https://s3.amazonaws.com/assets-zeke.heroku.com/addons-zeke.heroku.com/catalogs/58/original.png

嗯，这就是你的问题。由于 CORS 和其他跨域事物的工作方式，您需要使用 DNS 样式寻址 来访问您的存储桶。

假设您的原始 URL 是正确的（它看起来不像，但我可能完全错了），您可能希望使用此 URL：

http://assets-zeke.heroku.com.s3.amazonaws.com/addons-zeke.heroku.com/catalogs/58/original.png

换句话说：

http://bucket.s3.amazonaws.com/path/object.ext

查看：http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html 了解更多说明。

【讨论】：

好点。我将 URL 方案更改为 bucket.s3.amazonaws.com（并从我的存储桶名称中删除了句点 (.)，但我仍然没有看到这些标头。我将新标头添加到我的问题中。

@Zeke。你找到问题的根源了吗？我也有类似的问题。

您的博客无法为我加载。您可以在此处针对您的问题发布一些内容吗？

对不起，我的博客死了，但源内容仍然存在于这个 github 仓库中：github.com/zeke/zeke.heroku.com/blob/master/source/_posts/…

正如博文中提到的，对我来说，在 JS 中创建图像并为其设置“crossOrigin”属性也很重要。 （使用从其他域加载的 DOM 中的图像不起作用。）谢谢 Zeke！