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

【问题标题】：JavaScript XMLHttpRequest only works with inspector open (Access-Control-Allow-Origin error)JavaScript XMLHttpRequest 仅适用于检查器打开（Access-Control-Allow-Origin 错误）
【发布时间】：2016-11-22 20:12:52
【问题描述】：

我正在尝试使用 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”错误。如果我首先打开检查器然后尝试加载图像，我会得到预期的行为而没有错误。

我尝试使用 Wireshark 捕获请求，因为尝试使用 Inspector 监控错误会导致它自行解决，但没有成功。

我要实现的代码在这里https://github.com/scottcheng/cropit。

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

好奇之前是否有人遇到过这种古怪的 Inspector 行为。让我知道我是否可以提供更多详细信息/屏幕截图/你有什么。

谢谢，

【问题讨论】：

为什么要使用 Ajax 请求来加载图像？我不只是设置源吗？
平台代码不是我写的，所以不能完全回答你。 Ajax 被用来在这里获取远程图像，就像我提到的那样，当 Chrome 的检查器打开时，它一切正常，所以我只能假设代码在很大程度上是正确的。我想我可以尝试找到一种替代方法，但这需要重新编写大量代码，我希望这是一个简单的配置错误，或者其他人知道一些我不知道的 Chrome 技巧
@Alex 我知道这是一个旧的，但你有没有想过？遇到同样的问题，令人费解......

标签： javascript google-chrome amazon-s3 xmlhttprequest

【解决方案1】：

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

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

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

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

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

【讨论】：