当我通过javascript将本地文件推送到S3桶时， CORS问题

Question

我正在尝试将本地文件上传到AWS S3桶。我使用fetch api PUT方法。S3对URL进行了预签名。我遇到一个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问题?

Answer 1

在您可以使用预先指定的url上传到S3之前，您需要在S3桶上定义CORS策略，以便在一个域中加载的web客户端(例如localhost或cloudfront)可以与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/