使用預簽名鏈接上傳到 AWS S3 時出現 403 Cors 問題

Question

當我使用preSigned URL 上傳到S3時，出現403 CORS相關錯誤。

我嘗試了什么？

1. 更改我的訪問密鑰
2. 各種不同的CORS策略和CORS / Bucket 策略組合
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.
                    ]
                }
            }
        }
    ]
}