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();

一些快速说明：

1. S3 签名 URL 每次都使用相同的函数在我的后端 API 上生成。

2. 如果我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();如果有人能在评论中解释原因，我将不胜感激:)