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

Question

我需要从 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”标头存在于请求的资源。

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

Answer 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 问题的影响，但至少我找到了一个解决方案 - 或者更确切地说是一种解决方法。

// 编辑：

我发现我并不孤单：缓存的非 CORS 响应与新的 CORS 请求冲突