Question

我正在尝试使用JavaScript XMLHttpRequest（）函数从Amazon S3加载图像。

         var xhr = new XMLHttpRequest();
         xhr.onload = function (e) {
           if (e.target.status >= 300) {
             _this3.onImageError.call(_this3, _constants.ERRORS.IMAGE_FAILED_TO_LOAD);
             return;
           }
           _this3.loadFile(e.target.response);
         };
         xhr.open('GET', imageSrc);
         xhr.responseType = 'blob';
         xhr.send();`

我的S3存储桶已正确配置为CORS（99％肯定）。这是我正在使用的规则，我计划使Origin更具体一个：

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
    <ExposeHeader>x-amz-request-id</ExposeHeader>
    <ExposeHeader>x-amz-id-2</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

我也尝试了以下规则（结果相同），因为我现在真的只关心GET请求：

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

在Chrome中，尝试加载图片时出现“Access-Control-Allow-Origin”错误。如果我首先打开Inspector然后尝试加载图像我得到预期的行为，没有错误。

我试图通过Wireshark捕获请求，因为尝试使用Inspector监视错误导致它自行解决，但是一直没有成功。

我想要实现的代码是https://github.com/scottcheng/cropit。

我在这个存储库中提到了我遇到的错误https://github.com/scottcheng/cropit/issues/118但是线程中没有任何内容解决了我的问题。

好奇，如果有人曾经遇到过这种不稳定的督察行为。如果我能提供更多细节/截图/你有什么，请告诉我。

谢谢，

Answer 1

我今天遇到了同样的行为。

对我来说，问题是在同一网页上，图像首先被下载以显示在img标签中。然后，在img标签旁边有一个下载按钮，该按钮使用抓取功能下载图像数据，创建对象网址并强制浏览器将图像下载为带有下载属性的标签（以便能够设置自定义文件名。

我已经在存储图像的s3存储桶上正确设置了Access-Control-Allowed-Origin，并且在Firefox中一切正常，所以我很惊讶地看到它在Chrome中随机失败，并且没有打开Web检查器，如你所说。

事实证明，使用该URL提取图像时，在Chrome浏览器中，您从img标记中加载图像时就获得了该响应的缓存版本，并且该响应不包含必需的{{ 1}}标头。

在获取请求中添加Access-Control-Allowed-Origin可以确保未命中缓存，并且您将获得带有适当标头的新响应，然后将其阻止。

JavaScript XMLHttpRequest仅适用于检查器打开（Access-Control-Allow-Origin错误）

1 个答案: