对 AWS S3 的跨域请求 AJAX 请求有时会导致 CORS 错误答案

【问题标题】：Cross-origin requests AJAX requests to AWS S3 sometimes result in CORS error对 AWS S3 的跨域请求 AJAX 请求有时会导致 CORS 错误
【发布时间】：2019-08-05 02:12:52
【问题描述】：

我需要从 S3 中检索一些可公开访问的文件。

这是我的 S3 CORS 配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这是我的 JS 代码：

const response = await fetch(url, {
    mode: 'cors',
});

const blob = await response.blob();

它有效，但并非总是如此。有时我在控制台中会出现以下错误：

从源“https://my.host”访问“https://my-bycketuel/file.jpg”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

但是在我重新加载页面后（有时是几次，有时只是一次），错误就消失了，我可以读取响应对象。

【问题讨论】：

您需要在 {my.host} 上将 {my-bycketuel / *} 列入白名单。这样问题就会永远为你解决。这是跨平台访问问题。应该很容易。
另一种推荐的方法是您可以使用反向代理来解决问题。

标签： javascript ajax amazon-web-services amazon-s3 cors

【解决方案1】：

在这里。

我在 Chrome 开发工具中查看成功和不成功的请求。我发现不成功的请求的状态码为：200 OK (from disk cache)，而成功的请求的状态码为：200 OK

当我使用 cache: 'no-cache' 禁用缓存时，问题就消失了。

const response = await fetch(url, {
    method: 'GET',
    mode: 'cors',
    cache: 'no-cache',
    headers: {
        Origin: window.location.origin,
    },
});

我仍然不明白为什么缓存的请求会受到 CORS 问题的影响，但至少我找到了解决方案 - 或者更确切地说是一种解决方法。

// 编辑：

我发现我并不孤单：Cached non CORS response conflicts with new CORS request

【讨论】：

这是 S3 的 CORS 实现中的一个错误。 S3 未能在对非 CORS 请求的响应上设置 Vary: Origin，即使存储桶启用了 CORS 也是如此……因此 Chrome 假设它可以在 CORS 上下文中重用缓存的响应，但发现为时已晚工作，因为缓存的响应缺少Access-Control-Allow-Origin ... serverfault.com/a/856948/153161

【解决方案2】：

你好像错过了

<AllowedMethod>Head</AllowedMethod>

在您的配置文件中。

我认为这就是您遇到问题的原因。

确保在您选择 Get、Head、Options 的 Allowed Http Methods 中还包括白名单上的 Access-Control-Allow-Methods、Access-Control-Allow-Origin 和 Origin

试试看！

祝你好运

【讨论】：

我添加了<AllowedMethod>HEAD</AllowedMethod>，但问题并没有消失。但这对我来说最奇怪的是它有时有效，有时无效，而且我找不到任何原因或规则。
你检查你的白名单了吗？
白名单是什么意思？我已经找到了导致问题的原因。它与缓存有关：stackoverflow.com/questions/55158189/…