38

我无法强制 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>

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

有谁知道出了什么问题？

4

4 回答 4

51

首先，确保Origin每个请求都有一个标头。如果没有发送标头Origin，S3 将不会发送access-control标头，因为 S3 认为它们不相关（通常情况下，它们是）。Origin当通过 XMLHTTPRequest 进行跨域 HTTP 请求时，浏览器（使用 CORS 机制）会自动发送标头。

如果使用 加载图像img，您需要添加crossorigin="anonymous"属性。请参阅 有关跨域属性的 MDN 文档。Origin这将导致浏览器像使用 XMLHTTPRequest 一样发送请求标头。

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

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

至

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

我没有测试过这个。

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

于 2013-07-10T12:12:14.623 回答
31

我还用标签遇到了这个问题<image>，在遵循 Myrne Stol 的回答后，我将crossorigin=anonymous标签添加到了我的图像标签中。我验证了Origin标头确实被发送到 S3，但仍然Access-Control-Allow-Origin没有发送标头作为响应。

我遇到了这个 SO 答案，它解决了它。我将AllowedOriginS3 配置中的更改为：

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

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

于 2015-06-07T19:28:36.807 回答
22

Chrome 有一个他们不会修复的惊人错误：

在此处输入图像描述

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

顺便说一句，Safari 也有这个问题。

于 2019-03-20T15:59:19.733 回答
3

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

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

原来有第二个视频元素指向同一个资源，而那个视频元素没有crossorigin="anonymous". 因此，第二个视频播放得很好，因为它没有预期access-control标题，但是服务器响应被缓存并阻止第一个视频播放，因为缓存的服务器响应没有access-control header

于 2018-09-13T22:42:41.433 回答