从Amazon s3获取图像会出现CORS错误.(Chrome问题)

Question

我正在尝试使用这些CORS配置从Amazon s3获取图像:

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

我收到的错误是:

Image from origin 'https://s3.amazonaws.com' has been blocked from loading by Cross-Origin     Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我在Chrome中收到此错误,但在Firefox中未收到此错误.我尝试过浏览,但还没有找到解决方案.任何人都可以帮我解决这个问题吗？

谢谢

Answer 1

我一直关注 AWS 问题，我对此颇有见地。这个问题（以及类似问题）的问题在于，它只向社区公开了等式的一半（CORS 配置）。MVCE 中的“C”当然不满足。

等式中缺少的一半是您尝试访问前端资源的方式。具体来说，发送的请求标头至关重要。

• 你在用fetch吗？ canvas? 亚马逊开发工具包？像domtoimage这样的 东西？
• 您是否捕获了失败请求的请求标头？
  • 如果是这样，为什么他们不在问题中？

CORS 基础知识

如果您不发送origin请求标头，则不会获得 CORS 响应标头。如果您确实发送了origin标头，并且允许来源，则您应该返回 CORS 标头。就这么简单。

所以丢失的origin标题应该是你排除的第一件事。您确定要发送origin标头吗？更常见的是，您使用的图书馆是否发送了一个？如果你再深入一点，真正的问题可能是“为什么origin我的请求中没有标头？”

旁注：您可以使用像Requestly这样的浏览器扩展来origin从所有传出请求中删除标头，并惊叹于所有破坏的东西。

适用于 x，但不适用于 y

回到我的“发布您的请求标头”肥皂盒 - 如果 Chrome 和 Firefox 的行为不同，您是否确认每个都发送相同的标头集？

浏览器为您设置了多个标头，浏览器实现可能会对何时发送哪些标头做出不同的选择。