javascript - 使用 JavaScript 使用预签名 URL 上传 AWS S3 文件时出现 403 Forbidden 错误（AccessDenied）

Question

我正在尝试使用带有预签名 URL 的 JavaScript 将图像上传到我的 S3 存储桶。

这是我的 JavaScript 代码：

    const formData = new FormData();
    formData.append("file", event.target.files[0]);
    formData.append("Content-Type", event.target.files[0].type);
    Object.entries(preSignedFields).forEach(([key, value]) => {
        if ("Content-Type" === key) {
            return;
        }
        formData.append(key, value);
    })
    fetch(presignedUrl, {
        method: "PUT",
        headers: { "Content-Type": "multipart/form-data" },
        body: formData,
    })
        .then(response => console.log(response))
        .catch(error => console.log(error));

常量 presignedUrl 和 preSignedFields 来自 api 响应。当我调用 fetch 方法时，我得到 403 Forbidden 错误。

这是来自 chrome 开发工具 Network > Headers 的标题信​​息：

Request URL: https://_____.s3.amazonaws.com/files/67189b29466c4341b6cdd422578ac9dd
Request Method: PUT
Status Code: 403 Forbidden
Remote Address: _____
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Methods: GET, PUT, POST
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3000
Connection: close
Content-Type: application/xml
Date: Thu, 30 Jul 2020 13:31:37 GMT
Server: AmazonS3
Transfer-Encoding: chunked
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-id-2: 0c22DYZoqcxQ9W8X3o8zwhrP+LveBJ2GSJoer5IA0pgo98hkPaMC0gfO9kUJ7LzB4TfECmyl47I=
x-amz-request-id: _____
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 345706
Content-Type: multipart/form-data
Host: _____.s3.amazonaws.com
Origin: http://localhost:3000
Referer: http://localhost:3000
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36
------WebKitFormBoundaryHh0fScf4jkdjsk94
Content-Disposition: form-data; name="file"; filename="image.jpeg"
Content-Type: image/jpeg


------WebKitFormBoundaryHh0fScf4jkdjsk94
Content-Disposition: form-data; name="Content-Type"

image/jpeg
------WebKitFormBoundaryHh0fScf4jkdjsk94
Content-Disposition: form-data; name="acl"

public-read
------WebKitFormBoundaryHh0fScf4jkdjsk94
Content-Disposition: form-data; name="key"

files/{hiding value}
------WebKitFormBoundaryHh0fScf4jkdjsk94
Content-Disposition: form-data; name="AWSAccessKeyId"

{hiding value}
------WebKitFormBoundaryHh0fScf4jkdjsk94
Content-Disposition: form-data; name="policy"

{hiding value}
------WebKitFormBoundaryHh0fScf4jkdjsk94
Content-Disposition: form-data; name="signature"

{hiding value}
------WebKitFormBoundaryHh0fScf4jkdjsk94--

我的 S3 的 Cors 设置是这样的：

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

我找不到我的实施有什么问题。任何建议将不胜感激。

标签： javascriptamazon-web-servicesamazon-s3