S3 间歇性显示的请求资源上不存在“Access-Control-Allow-Origin”标头

Question

我有一个函数，它GET是来自 S3 存储桶的图像/视频。当我的应用程序首次加载时，该函数会完美地返回图像/视频。但是，如果我上传新的图像/视频并获取新的签名 URL 来检索它，则会出现以下错误（并且图像/视频无法加载）：从源“ http://localhost:3000 ”访问“ https://s3-bucket-name.s3.amazonaws.com/blah/blah ”的XMLHttpRequest已被 CORS 策略阻止：无“访问控制允许” -Origin' 标头存在于请求的资源上。我已将 S3 存储桶的权限设置为：<?xml version="1.0" encoding="UTF-8"?><CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"><CORSRule>    <AllowedOrigin>*</AllowedOrigin>    <AllowedMethod>GET</AllowedMethod>    <AllowedMethod>HEAD</AllowedMethod>    <AllowedMethod>POST</AllowedMethod>    <AllowedMethod>PUT</AllowedMethod>    <AllowedHeader>*</AllowedHeader></CORSRule></CORSConfiguration>我的代码如下所示：const request = new XMLHttpRequest();const media = document.createElement('img');request.onprogress = (e) => {  updateLoadingBar(e.percent);};request.onreadystatechange = (e) => {  if (request.readyState === 4) {    media.src = URL.createObjectURL(request.response);  }};request.responseType = 'blob';request.open('get', url);request.send();一些快速说明：S3 签名 URL 每次都使用相同的函数在我的后端 API 上生成。如果我Disable cache在Network选项卡中打开并检查了 Chrome 开发工具，它会正常加载。对于您可能需要清除此错误的任何建议，我深表感谢。谢谢！

Answer 1

禁用缓存以XMLHttpRequest使其工作：

request.open('get', url);

request.setRequestHeader('cache-control', 'no-cache, must-revalidate, post-check=0, pre-check=0');

request.send();

如果有人能在评论中解释原因，我将不胜感激:)