Question

我通过 Node/Express 后端成功获得了一个预签名 URL，用于 S3 上的 putObject 请求，并尝试通过浏览器上传相关文件。

当我通过浏览器（或邮递员）发出 put 请求时，我得到一个 400 或 403。我是 S3 的新手，不知道在哪里可以找到相关信息。

我知道如何正确获取预先签名的 URL，但为什么我的 put 文件请求失败了？

据我所知，我收到请求的存储桶是可公开访问的。

我在此处查找了不同的代码演练教程、S3 文档和帖子。

我在前端请求预签名 URL 的代码

// Returns null or array of objects of type { url : string | null; contentType: string; }
const filesDescription = fileList[+key];

if (filesDescription === undefined || filesDescription === null) continue;

const Key          = `${prefix}/${filesDescription.name}`;
const ContentType  =  filesDescription.type;

const request  =  generateEndpointConfig(APIEndpoints.GET_PRESIGNED_URL, { Key, ContentType, userID });

const res      =  await apiCall(request.METHOD, request.URL, request.DATA);

const url = typeof res.data.signedUrl === "string" ? res.data.signedUrl : null;

presignedUrls.push({url, contentType:  ContentType});

我的 Node/Express 后端获取 URL 的代码

const { ContentType, Key } = req.body;

const s3 = new S3({
                accessKeyId: AWS_ACCESS_ID,
                secretAccessKey: AWS_SECRET
            });

const url = await s3.getSignedUrlPromise("putObject",
                {
                    Bucket: AMAZON_AWS_STATIC_BUCKET,
                    ContentType,
                    Key,
                    Expires: 300
                });

return res.status(StatusCodes.OK).json({ signedUrl: url })

最后，put 请求我上传文件

const presignedUrls = await getPresignedUrls(+idx);
if (presignedUrls === null) return false;

for (const fileIdx in presignedUrls)
{
  const fileList      =  files[idx];
  const uploadConfig  =  presignedUrls[fileIdx];

  if (fileList === null || uploadConfig.url === null) continue;

  const fileToUpload = fileList[fileIdx];

  try
  {
    // Make put request for corresponding file to cloud service
    await axios.put(uploadConfig.url, fileToUpload,
    {
        headers:
        {
            "Content-Type": uploadConfig.contentType
        }
    });
  }

  catch(err)
  {
    return false;
  }

我还应该提到，由于我是为经过身份验证的用户执行此操作，因此我还传输了 Authorization 形式的 Bearer <TOKEN> 标头。

=== 编辑 ===

这是我在 Postman 中以状态代码 403 返回的示例错误响应。

<?xml version="1.0" encoding="UTF-8"?>
<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>...</RequestId>
    <HostId>...</HostId>
</Error>

=== 编辑 2 ===

我的存储桶上的策略是

{
    "Version": "2012-10-17",
    "Id": "<POLICY_ID>",
    "Statement": [
        {
            "Sid": "<STMT_ID>",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <CLOUDFRONT_ORIGIN_ID>"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<S3_BUCKET_NAME>/*"
        },
        {
            "Sid": "<STMT_ID>",
            "Effect": "Allow",
            "Principal": {
                "Federated": [
                    "http://localhost:3000",
                    "https://www.my-website.com/"
                ],
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::<S3_BUCKET_NAME>/*"
        }
    ]
}

我的存储桶上的 CORS 配置是

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://www.my-website.com",
            "http://localhost:3000"
        ],
        "ExposeHeaders": []
    }
]

作为参考，此存储桶为 CDN 网络提供 CloudFront 分配，并且该存储桶仅在域级别进行 GET 请求时受到限制。

=== 编辑 3 ===

这是我尝试在浏览器上上传时返回的错误。

<Error>
<Code>SignatureDoesNotMatch</Code>
<Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>
<AWSAccessKeyId>...</AWSAccessKeyId>
<StringToSign>GET [A_LONG_NUMBER] /[BUCKET_NAME]/[PREFIX]/[IMAGE_NAME].jpg</StringToSign>
<SignatureProvided>...</SignatureProvided>
<StringToSignBytes>[SOME_BYTES]</StringToSignBytes>
<RequestId>...</RequestId>
<HostId>...</HostId>
</Error>

=== 最终编辑 ===

除了@jarmod 的回答外，问题是一旦网站上的用户通过身份验证，我的应用程序配置就会自动将 Authorization 标头转发给所有请求。删除此用于调用 S3 的标头使该过程在浏览器上成功运行。

Answer 1

您的 S3 存储桶上是否设置了 CORS 配置？这指定了哪些源可以访问您的存储桶，以及它们可以使用哪些 HTTP 方法。在这种情况下，您通常会在开发者控制台中看到类似 Access to fetch at 'YOUR-PRESIGNED-URL' from origin 'YOUR-ORIGIN' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

此页面介绍了基本配置：https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

Answer 2

最初签署 putObject URL 时，您提供了 IAM 用户的 AWS 凭证（访问密钥和秘密密钥）。稍后，当 S3 预签名 URL 呈现给 S3 时，该 URL 的原始签名者，即您的 IAM 用户，将成为上传的主体。因此，该 IAM 用户委托人需要一个允许在相关资源上使用 s3:PutObject 的 IAM 策略，或者您的存储桶策略需要允许 IAM 用户委托人这样做。

通过浏览器在 AWS S3 上放置对象时出现意外错误 (putObject)

2 个答案: