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

Posted 2023-03-04

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

【英文标题】：No 'Access-Control-Allow-Origin' header is present on the requested resource intermittently shown with S3

【发布时间】：2019-10-28 09:13:07

【问题描述】：

我有一个函数可以GETs 来自 S3 存储桶的图像/视频。当我的应用程序首次加载时，该函数会完美地返回图像/视频。但是，如果我上传一个新的图像/视频并获取一个新的签名 URL 来检索它，我会收到以下错误（并且图像/视频无法加载）：

从源“http://localhost:3000”访问“https://s3-bucket-name.s3.amazonaws.com/blah/blah”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-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();

一些快速说明：

每次都使用相同的函数在我的后端 API 上生成 S3 签名 URL。 如果我打开了 Chrome 开发工具并在 Network 选项卡中选中了 Disable cache，它可以正常加载。

感谢您提出任何解决此错误的建议。谢谢！

【问题讨论】：

酷。在incognito 或其他浏览器中会发生什么……？

@Panther incognito Chrome 中的模式：同样的错误。 Firefox（任何模式）：每次都能完美运行。 Safari：与 Chrome 一样失败（除了打开开发工具似乎没有帮助）。还需要注意的是，我没有使用任何浏览器扩展程序，并且在另一台计算机上测试时也会发生同样的错误。

你的api和前端在同一个域吗？当我的数据库与我的站点位于不同的域时，这发生在我身上。你试过这个amazon s3 cors

【参考方案1】：

在XMLHttpRequest 中禁用缓存允许它工作：

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

如果有人能解释为什么在 cmets 中，我将非常感激 :)

【讨论】：

S3 的 CORS 实现并不完全正确，我怀疑您的解决方案实际上也不“正确”，而可能只是注入了一个标头，导致 Chrome 发送 S3 正确处理的请求。如果我是对的，request.setRequestHeader('cache-control', 'internet-cats, max-lives=9') 会产生同样的效果。