403 Cors 使用预签名链接上传到 AWS S3 时出现问题

Question

当我使用预签名URL 上传到S3时，我收到与403 CORS相关的错误。

我试过什么？

1. 更改我的访问密钥
2. 各种不同的CORS策略和CORS/存储桶策略组合
3. 将我的存储桶权限(读取和写入(设置为公共打开

我已经与这个错误作斗争了几天了，所以如果有一个AWS忍者可以看看，我将不胜感激。

客户端代码：

async function uploadToS3(image, signedRequest) {
const options = {
method: "PUT",
headers: {
"Content-Type": image.type
}
};
const send = await fetch(signedRequest, image, options);
}
async function handleSubmit(e) {
e.preventDefault(e);
console.log(images);
const response = await s3Sign({
variables: {
imageName: formatImageName(image.name),
imageType: image.type
}
});
const signedRequest = response.data.signS3.signedRequest;
const upload = await uploadToS3(image, signedRequest);
}

服务器端 (graphQL(：

const aws = require("aws-sdk");
aws.config.setPromisesDependency();
aws.config.update({
accessKeyId: process.env.ACCESS_KEY_ID,
secretAccessKey: process.env.SECRET_ACCESS_KEY,
region: process.env.REGION
});
const s3Bucket = process.env.BUCKET_NAME;
//excerpt from schema below
signS3: {
type: SignedRequestType,
args: {
imageName: { type: GraphQLString },
imageType: { type: GraphQLString }
},
async resolve(parent, args) {
const s3 = new aws.S3();
const imageName = args.imageName;
const imageType = args.imageType;
const s3Params = {
Bucket: s3Bucket,
Key: imageName,
Expires: 60,
ContentType: imageType,
ACL: "public-read"
};
const signedRequest = await s3.getSignedUrl("putObject", s3Params);
const url = `https://${s3Bucket}.s3.amazonaws.com/${imageName}`;
return {
signedRequest,
url
};
}

s3 上的 CORS 配置：

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

存储桶策略：

{
"Version": "2008-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": [
"s3:GetObject",
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": "arn:aws:s3:::s3-transackuk-product-media/*"
}
]
}

Answer 1

S3 CORS 配置似乎没问题。对于存储桶策略，请尝试像这样扩展它：

{
"Version": "2008-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": [
"s3:GetObjectAcl",
"s3:GetObject",
"s3:PutObject",
"s3:PutObjectAcl",
"s3:ListMultipartUploadParts"
],
"Resource": "arn:aws:s3:::s3-transackuk-product-media/*",
"Condition": {
"StringLike": {
"aws:Referer": [
"http://yourdomain/*", // if your app runs on an http domain
"https://yourdomain/*", // if your app runs on an https domain
"http://localhost:3000/*" // if this policy is for dev and you're accessing the bucket from localhost you need to specify the port too.
]
}
}
}
]
}