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

Question

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

我尝试了什么？

1. 更改我的访问 key
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.
                    ]
                }
            }
        }
    ]
}