从亚马逊S3获取图像会导致CORS错误。 （Chrome问题） [英] fetching images from Amazon s3 gives CORS error. (Chrome issue)

问题描述

 < CORSRule>我试图从这些CORS配置中获取Amazon S3的图片。 
< AllowedOrigin> *< / AllowedOrigin> 
< AllowedMethod> GET< / AllowedMethod> 
< AllowedMethod> PUT< / AllowedMethod> 
< AllowedMethod> POST< / AllowedMethod> 
< AllowedMethod> DELETE< / AllowedMethod> 
< AllowedHeader> *< / AllowedHeader> 
< / CORSRule> 
  

以及我收到的错误是：

 源自'https://s3.amazonaws.com'的图像已被跨源资源共享策略阻止加载：没有'Access-Control-Allow-Origin'头部存在在请求的资源上。 
  

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

谢谢

解决方案

我一直关注AWS问题，并且我看到了这一点。这个问题（以及类似的问题）的问题是它只向社区公开了一半的等式（CORS配置）。 MVCE 中的C当然不满意。

等式的一半是你试图访问前端资源的方式。具体而言，发送的请求标头非常关键。

• 您是否正在使用 fetch ？ 画布？亚马逊SDK？像
  domtoimage ？


• 您是否捕获了
  失败请求的请求标头？
  
  
  
  
  • 如果是这样，为什么他们不是这个问题？
  
  

---

CORS基础 $ b

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

因此，一个缺少的起源标题应该是您排除的第一件事。你确定你发送了一个来源标题吗？更常见的情况是，您正在使用的库发送一个库吗？如果你深入了解一下，真正的问题可能是为什么我的请求中不存在 origin 标题？

边注：您可以使用浏览器扩展名，例如请求从所有传出请求中移除 origin 并惊叹于所有破碎的东西。

---

适用于x，但不适用于

返回我的发布您的请求标题soapbox - 如果Chrome和Firefox的行为不同，您是否验证过每个发送的都是相同的标头？

浏览器为您设置了几个标题，浏览器实现，这些选项是关于在什么时候发送的。

I'm trying to fetch images from Amazon s3 with these CORS config:

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

and the error I receive is :

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.

I receive this error in Chrome but not in Firefox. I've tried browsing but haven't found a solution. Can anyone help me out with this?

Thanks

解决方案

I keep my eyes on AWS questions, and I see this quite a bit The problem with this question (and those like it) is that it only exposes half of the equation (the CORS configuration) to the community. The "C" in MVCE certainly isn't satisfied.

The missing half of the equation is how you're trying to access the resource on the front end. Specifically, the request headers that are sent are critical.

• Are you using fetch? canvas? Amazon SDK? Something like domtoimage?
• Have you captured the request headers for the failing request?
  • If so, why aren't they in the question?

---

CORS Basics

If you don't send an origin request header, you're not going to get CORS response headers back. If you do send an origin header, and the origin is allowed, you should get CORS headers back. It's that simple.

So a missing origin header should be the first thing you rule out. Are you absolutely sure you're sending an origin header? More often, is the library you're using sending one? If you dig a little deeper, the real question may be "why isn't an origin header present on my request?"

Side Note: You can use a browser extension like Requestly to remove the origin header from all outgoing requests, and marvel at all the stuff that breaks.

---

Works in x, but not y

Back to my "post your request headers" soapbox - If Chrome and Firefox are acting differently, have you verified that each is sending the same set of headers?

Several headers are set for you by the browser, and browser implementations may make different choices regarding which headers to send when.

这篇关于从亚马逊S3获取图像会导致CORS错误。 （Chrome问题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！