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

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但线程中没有任何内容解决了我的问题。

很好奇是否有人以前遇到过这种不稳定的 Inspector 行为。如果我可以提供更多详细信息/屏幕截图/你有什么，请告诉我。

谢谢，

Answer 1

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

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

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

事实证明，当使用该 URL 获取图像时，在 Chrome 中，当图像加载到 img 中时，您会遇到响应的缓存版本。标记，并且此响应不包含所需的 Access-Control-Allowed-Origin标题。

添加 {cache: 'no-store'}到获取请求确保不会命中缓存，并且您会获得带有适当 header 的新响应，然后不会被阻止。