javascript - 对 AWS S3 的跨域请求 AJAX 请求有时会导致 CORS 错误
问题描述
我需要从 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”标头出现在请求的资源。
但是在我重新加载页面(有时几次,有时只是一次)之后,错误就消失了,我能够读取响应对象。
解决方案
在这里。
我在 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 请求冲突
推荐阅读
- windows - 批量从文本文件中提取 URL
- ibm-mq - 如何记录 WebSphere MQ 消息
- android - 在 Edittext 上,对讲宣布已达到最大限制,即使未达到也是如此 当 maxLength 与 numberPassword 一起定义时会发生这种情况
- asp.net - 将 cookieSameSite="None" 添加到 SessionState 但是 Cookie 的 SameSite 值仍然是 Lax(默认)
- linux - MV 命令不适用于以引号开头的文件名
- c# - 为什么 ZedGraph 不绘制第二条曲线?
- php - 带 str_replace 的数字格式
- javascript - (Three.js /Three.js 编辑器)如何制作逼真的汽车转向效果?
- ruby-on-rails - Rails 中格式不正确的异常
- python - 如何替换熊猫数据框中错误标记的日期?