使用预签名 URL 将文件上传到 Amazon S3 时出现 CORS 错误

Posted 2023-03-04

【中文标题】使用预签名 URL 将文件上传到 Amazon S3 时出现 CORS 错误

【英文标题】：Getting CORS error while uploading files to Amazon S3 using presigned url

【发布时间】：2019-04-18 16:23:34

【问题描述】：

我正在尝试使用 Angular 客户端将文件上传到 Amazon S3。我使用 NodeJs 应用程序服务器生成了预签名 URL。将文件上传到预签名 URL 时，出现错误：

“对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“http://localhost:4200”。”

我已将以下 CORS 配置添加到我的存储桶权限中。

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

【问题讨论】：

您的存储桶在云端吗？如果是这样，请确保允许 OPTIONS 并且您将标头列入白名单。

@MisterSmith - 在 S3 或 CloudFront 中，您在哪里允许 OPTIONS？与白名单相同

我在我的 ReactJS 应用程序中遇到了同样的问题。

【参考方案1】：

我的问题是，即使在执行以下操作后，我也遇到了相同的 CORS 错误 - 出于某种原因 - getSignedUrl 返回了这样的网址：

https://my-bucket.s3.us-west-2.amazonaws.com/bucket-folder/file.jpg

我已经删除了区域部分 - us-west-2 部分 - 并修复了它??‍♂️

所以现在是这样

https://my-bucket.s3.amazonaws.com/bucket-folder/file.jpg

【讨论】：

就我而言，我指向了错误的区域

【参考方案2】：

某些浏览器不支持来自 Localhost 的 CORS 请求，例如 Chrome。尝试使用 lvh.me:4200 进行测试。

【参考方案3】：

虽然您的浏览器确实可能不支持 localhost 作为与 AllowedOrigin 匹配的有效来源，但您可能还需要检查从 S3 获取的内容实际上是否正确具有您期望的正确标头以及您的存储桶设置正确。您可以通过 chrome 开发者工具进行操作：https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#headers

http://127.0.0.1 也是 localhost（在大多数操作系统上）的有效域，应该与大多数浏览器兼容，以匹配 AllowedOrigin。

【参考方案4】：

你要找的是cor_rules

s3 = boto3.resource('s3')
bucket_cors = s3.BucketCors(bucket_name='bucket_name', cors_rules=[
"AllowedOrigins": "*",
])

我不确定此代码是否有效，也许您还需要指定其他 cors_rules，例如 AllowedHeaders。查看文档：

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/s3.html#id250