从 Amazon s3 获取图像会出现 CORS 错误。 （铬问题）

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 的行为不同，您是否验证过它们都发送了相同的标头集？

浏览器为您设置了几个标头，并且浏览器实现may make different choices 关于何时发送哪些标头。