关于amazon s3:S3没有返回Access-Control-Allow-Origin标头?

S3 not returning Access-Control-Allow-Origin headers?

我无法强迫S3在从桶返回的所有对象上设置CORS头,虽然启用了CORS,因为客户端S3上传工作正常,返回的对象没有CORS头!

我启用的政策是:

1
2
3
4
5
6
7
8
9
10
<?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>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

示例对象URL https://s3.amazonaws.com/captionable/meme/test

有谁知道什么是错的?


首先,确保每个请求都有一个Origin标头。如果没有发送Origin标头,S3将不会发送access-control标头,因为S3认为它们无关(通常,它们是)。浏览器(意味着CORS机制)将在通过XMLHTTPRequest执行跨源HTTP请求时自动发送Origin标头。

如果使用img加载图像,则需要添加crossorigin="anonymous"属性。看到
关于crossorigin属性的MDN文档。这将导致浏览器发送Origin请求标头,就像使用XMLHTTPRequest一样。

按照Sam Selikoff的回答,你可能需要改变

1
 <AllowedOrigin>http://*</AllowedOrigin>

1
2
 <AllowedOrigin>http://*</AllowedOrigin>
 <AllowedOrigin>https://*</AllowedOrigin>

我没有测试过这个。

通过Paul Draper对此答案的评论:注意缓存问题。浏览器可能使用不包含相应access-control响应标头的缓存响应。在开发过程中,您可以清除缓存。在生产中,如果以前以静态方式使用,则必须切换到资源的新URL。


我也用标签遇到了这个问题,在按照Myrne Stol的回答后,我将crossorigin=anonymous标签添加到了我的图片标签中。我确认Origin标头确实被发送到S3,但仍然没有发送Access-Control-Allow-Origin标头作为响应。

我遇到了这个答案,它解决了它。我将S3配置中的AllowedOrigin更改为:

1
2
<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>

现在S3用访问头响应。好极了!


Chrome有这个惊人的错误,他们无法修复:

enter image description here

如果您足够幸运能够控制生成标记的代码,则可以将crossorigin="anonymous"添加到标记中。
喜欢
如果您可以修改标记的URL或XHR请求的URL,则可以向其中一个添加查询参数以绕过缓存。
喜欢foo.bar/baz.jpg?x-request=xhr

Safari也有这个问题。


TLDR;确保请求某个(某处)需要CORS的资源的每个图像或视频元素都使用crossorigin="anonymous"

我遇到了一个导出到画布的视频元素的问题。 CORS在S3中正确设置,但它仍然给我一个错误并拒绝播放视频。

事实证明,有第二个视频元素指向同一资源,该视频元素没有crossorigin="anonymous"。因此,第二个视频播放正常,因为它不期望access-control标头,但服务器响应被缓存并阻止第一个视频播放,因为缓存的服务器响应没有access-control header