S3没有返回Access-Control-Allow-Origin标头？

Question

我无法强迫S3在从桶返回的所有对象上设置CORS头，虽然启用了CORS，因为客户端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>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

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

有谁知道出了什么问题？

Answer 1

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

如果使用img加载图片，则需要添加crossorigin="anonymous"属性。看到 MDN Documentation on crossorigin attribute。这将导致浏览器发送Origin请求标头，就像使用XMLHTTPRequest一样。

根据Sam Selikoff的回答，您可能需要更改

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

到

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

我没有测试过这个。

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

Answer 2

我还使用<image>标记遇到此问题，在按照Myrne Stol的回答后，我将crossorigin=anonymous标记添加到了我的图片代码中。我确认Origin标头确实已发送到S3，但仍然没有发送Access-Control-Allow-Origin标头作为响应。

我遇到this SO answer并解决了它。我将S3配置中的AllowedOrigin更改为：

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

现在S3使用访问标头进行响应。耶！

Answer 3

Chrome浏览器存在一个无法修复的惊人错误：

如果您很幸运地可以控制生成标记的代码，则可以在标记中添加crossorigin="anonymous"。
像<img src="foo.bar/baz.jpg" crossorigin="anonymous" />
如果您可以修改标记的URL或XHR请求的URL，则可以向其中之一添加查询参数以绕过缓存。
像foo.bar/baz.jpg?x-request=xhr。

Safari也有这个问题。