当我通过 javascript 将本地文件推送到 S3 存储桶时出现 CORS 问题答案

【问题标题】：CORS issue when I push local file to S3 bucket via javascript当我通过 javascript 将本地文件推送到 S3 存储桶时出现 CORS 问题
【发布时间】：2022-12-16 15:31:00
【问题描述】：

我正在尝试将本地文件上传到 AWS S3 存储桶。我使用 fetch api PUT 方法。该 URL 由 S3 预先签名。我遇到了 CORS 问题。

我上传没问题~30kb；它发生在一个请求中。

但是如果我上传一个 2mb 的文件，它需要 2 个请求。第一个是带有选项方法的预检，结果为 200 OK。但第二个是“真正的”请求，它失败了。我已将 S3 中的 CORS 策略设置为 "Access-Control-Allow-Origin":"*"。预检请求的响应头有"Access-Control-Allow-Origin"，但真正的要求没有。

我的代码很简单：

let command = new PutObjectCommand({
    Body: "selectedfile",
    Bucket: "my bucket",
    Key: "filename"    
});
let signedurl = await getSignedUrl({
    region:"myregion",
    credentials:{accessKeyId:"mykey",secretAccessKey:"mykey"}}, command, {expiresIn:3600}
);
let response = await fetch(signedurl, {method: "PUT", body: "selectedfile"});

有没有人知道解决这个 CORS 问题的线索？

【问题讨论】：

在您的 CORS 配置中，您还需要明确允许 PUT 方法。

标签： javascript rest amazon-s3 cors

【解决方案1】：

在您可以使用预签名 URL 上传到 S3 之前，您需要在 S3 存储桶上定义一个 CORS 策略，以便在一个域（例如 localhost 或 cloudfront）中加载的 Web 客户端可以与 S3 域中的资源进行交互。在 S3 存储桶上设置 CORS 策略并不复杂；但是，如果您确实弄错了，您通常可以使用本 CORS 故障排除指南中提到的建议来解决它： https://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html

我还建议阅读此博客：

https://aws.amazon.com/blogs/media/deep-dive-into-cors-configs-on-aws-s3-how-to/

【讨论】：

谢谢你的回答<br/>我已经在我的S3中设置了CORS策略，<br/>但是即使“option”没问题，“put”也会失败。