从 Amazon AWS s3 存储桶错误获取 Html5：请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-02-27

【中文标题】从 Amazon AWS s3 存储桶错误获取 Html5：请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Html5 fetch from Amazon AWS s3 bucket error: No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2020-07-24 15:37:46

【问题描述】：

在我的应用程序中，我尝试使用 fetch API 从我的 AWS S3 存储桶中获取文件：

const response = await fetch(baseUrl + url);

我收到以下错误：

CORS 策略已阻止从源“http://localhost:8000”获取“https://my-bucket.s3.amazonaws.com/uploads/044_IMH7kfc.m4a?AWSAccessKeyId=AKIAZB4Y4NZS&Signature=l6QNLV1iUj%2LerlUis%3D&Expires=1586648149”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

这是我的 AWS 存储桶中的 CORS 配置文件：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
</CORSRule>
</CORSConfiguration>

我的应用程序中的 Fetch API 显示“请求的资源上不存在 'Access-Control-Allow-Origin' 标头”，但 CORS 配置中的“Access-Control-Allow-Origin”应该添加该标头，不是吗？

我尝试了此处发布的所有解决方案均无济于事： Allow Access-Control-Allow-Origin header using html5 fetch API

我还找到了 AWS 故障排除页面，但这也没有帮助： https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html

我错过了什么？

【问题讨论】：

我有一个similar issue，但到目前为止还没有运气。你解决了这个问题吗？

已经有一段时间了，我的记忆有点参差不齐。我想我更改了 AWS S3 存储桶中的一些设置以允许来自任何地方的请求。不确定这是否是解决错误的原因（或者它是否完全安全......）但这是您可以尝试的。祝你好运！

【参考方案1】：

我猜问题出在格式上，因为新的 S3 控制台只允许 JSON 格式。

祝你好运，希望对你有所帮助。