Javascript 403使用预先签名的链接上载到AWS S3时出现Cors问题

当我使用预先签名的URL上传到S3时，我得到了一个与

403 CORS

相关的错误

我试过什么

更改我的访问密钥

各种不同的CORS策略和CORS/桶策略组合

将我的存储桶权限（读写）设置为公共打开

我已经和这个错误斗争了好几天了，所以如果有一个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
        };
      }

<?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/*"
        }
    ]
}

s3上的CORS配置：

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
        };
      }

<?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/*"
        }
    ]
}

---

S3 CORS配置似乎还可以。对于bucket策略，请尝试这样扩展它：

{
    "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.
                    ]
                }
            }
        }
    ]
}

---

S3 CORS配置似乎还可以。对于bucket策略，请尝试这样扩展它：

{
    "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.
                    ]
                }
            }
        }
    ]
}