Amazon S3 CORS 仍然无法正常工作：没有“访问控制允许来源”答案

【问题标题】：Amazon S3 CORS still not working: No 'Access-Control-Allow-Origin'Amazon S3 CORS 仍然无法正常工作：没有“访问控制允许来源”
【发布时间】：2017-05-13 06:11:46
【问题描述】：

在尝试从 Amazon S3 服务器加载图像（跨域设置为匿名）时，我们仍然遇到可怕的错误：

 XMLHttpRequest cannot load 
 http://resource-url No 
'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://server-url' 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>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

以及亚马逊的默认 CORS 配置。仍然，同样的错误。

其他几点说明：

Chrome 中存在此问题，但 Firefox 中没有。
图像正在作为 AFrame 资产加载（因此是 XMLHttpRequest）
curl -XGET -H 'Origin: anonymous' http://resource-url 返回看起来是图像的内容，以 ?PNG 开头
对于 Chrome，here are the headers。 Here is the response。
对于 Firefox，here are the headers。响应是图像。
Here 是 CORS 上的 AFrame 文档。但是，由于图像是从 S3 获取并在 Github 页面上提供它们并不是一个真正的选择，因此它可能没有用处。

我无能为力，所以任何帮助都将不胜感激。非常感谢！

【问题讨论】：

Upon trying to load an image (with crossorigin set to anonymous) - 你能显示这个代码吗，错误信息表明你使用的是XMLHttpRequest 而不是“加载图像”
您能否检查请求标头是否包含 Origin 标头 - 我已经读过，如果没有 Origin 标头，Amazon S3 服务器将不会使用任何 CORS 标头进行响应 ref
XMLHttpRequest is sending a CORS header - 不知道你的意思是什么，我从来没有说过 XMLHttpRequest 需要发送 CORS 标头 ... CORS 标头由客户端接收，而不是发送
I meant a CORS header being included in the request 再次，CORS 标头在 response ...使用浏览器开发人员工具的网络选项卡 ...检查请求/响应标头是否有失败的请求。 .. 具体来说（我可以在文档中找到所有内容）检查 request 标头是否包含 Origin 标头 - 没有这个，Amazon S3 将不会使用 CORS response 标头响应（正如我之前提到的）
This issue is present in Chrome but not Firefox - 忽略我所说的一切。它适用于任何浏览器的事实意味着服务器端是正确的，而客户端至少在 Firefox 中是正确的......我很惊讶 Chrome 与 Firefox 之间存在差异......获取资源的页面是http:// 也是？（例如不是https://）

标签： javascript amazon-web-services amazon-s3 cors

【解决方案1】：

可能添加<AllowedMethod>HEAD</AllowedMethod>:

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

似乎有一些现代浏览器使用HEAD 方法发送的飞行前检查（用于服务器负载检查）。更多阅读here和here。

【讨论】：

谢谢。我到处都在搜索有关症状的参考资料，而您在这里所说的是根本原因。
:) 很高兴这对您有所帮助，祝您一切顺利@bfeist
我不知道这是否解决了它，或者只是使 CloudFront 无效的副作用。我正在查看网络跟踪，它是一个 GET 请求并且没有获取标头，但它现在正在工作，所以我赞成 :)
再想一想，也许 CloudFront 在提供缓存副本之前发送了 HEAD 请求？我只知道浏览器在 GET 上失败了。

【解决方案2】：

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

添加上述xml代码后，需要使缓存失效。

【讨论】：