image - 从 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”肯定不满意。

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

您在使用 fetch ? canvas ?亚马逊开发工具包？就像是
domtoimage ?

您是否捕获了请求 header
请求失败？

如果是这样，为什么他们不在问题中？

CORS 基础知识

如果您不发送 origin请求 header ，您将不会返回 CORS 响应 header 。如果您发送 origin header ，并且允许来源，您应该取回 CORS header 。就是这么简单。

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

旁注:您可以使用浏览器扩展程序，如 Requestly删除 origin所有传出请求的 header ，并惊叹于所有中断的东西。

适用于 x，但不适用于 y

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

浏览器为您设置了几个 header ，以及浏览器实现 may make different choices关于何时发送哪些 header 。