将图像上传到 AWS S3 存储桶 ReactJS 时 POST 403 禁止 CORS 响应答案

【问题标题】：POST 403 forbidden CORS response when uploading an image to AWS S3 bucket ReactJS将图像上传到 AWS S3 存储桶 ReactJS 时 POST 403 禁止 CORS 响应
【发布时间】：2021-03-16 15:48:06
【问题描述】：

您好，我正在尝试使用名为 react-s3 的 NPM 包从我的 React 应用程序将图像上传到 AWS S3。我正在使用 AWS Educate 帐户并正确设置了访问密钥和密钥。在我选择图像和控制台记录输出后，它给了我一个 403 禁止错误，如下所示。

POST https://shopkartimages.s3.amazonaws.com/403（禁止）

Response {type: "cors", 
url: "https://shopkartimages.s3.amazonaws.com/", 
redirected: false, 
status: 403, ok: 
false, …}
body: (...)
bodyUsed: false
headers: Headers
__proto__: Headers
ok: false
redirected: false
status: 403
statusText: "Forbidden"
type: "cors"
url: "https://shopkartimages.s3.amazonaws.com/"
__proto__: Response

我的存储桶策略如下：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3Permissions",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:Get*",
                "s3:List*"
            ],
            "Resource": "arn:aws:s3:::shopkartimages/*"
        }
    ]
}

我在 S3 中的 CORS 配置如下：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

【问题讨论】：

检查您的访问密钥和密钥属于角色是否有权访问此S3存储桶。
是的兄弟，我已经检查了两个凭据并且它们是正确的
你能发布控制台错误吗？
我已经贴在上面了
您解决了这个问题吗？ @aviboy2006

标签： reactjs amazon-web-services amazon-s3 cors

【解决方案1】：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "S3Permissions",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:Get*",
                "s3:List*"
            ],
            "Resource": "arn:aws:s3:::shopkartimages/*"
        }
    ]
}

您的存储桶策略仅允许 Get 和 List 操作。而上传文件是一个PUT操作。

【讨论】：

是的，我尝试放置“s3:Put*”，但仍然得到与问题中提到的相同控制台日志输出相同的 403 禁止错误

【解决方案2】：

我在 react-s3 中遇到了同样的问题。我最终放弃了它，转而使用 AWS SDK，它对我来说很好（即使在反应中）。这就是它所需要的。

首先安装aws-sdk：

$ npm install aws-sdk

然后用这个替换你对 react-s3 所做的一切：

import AWS from 'aws-sdk';

AWS.config.update({ region:region, credentials: new AWS.Credentials(secret_id, secret_access_key)});
var s3 = new AWS.S3({apiVersion: "2006-03-01", params: { Bucket: bucketName }});

let upload_params = {Bucket: bucketName, Key: file.path, Body: file};
let upload = new AWS.S3.ManagedUpload({params: upload_params});
let promise = upload.promise();
promise.then(
    function(data){console.log("Successfully uploaded:", file.path);},
    function(err){console.log("Failed to upload", file.name, "with error:", err.message);}
);

这是我来自 S3 存储桶权限的 CORS 内容：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ]
    }
]

此外，公共访问被阻止，我没有搞乱自定义存储桶策略。

希望这可以帮助其他人处理这些 CORS/S3/react 噩梦。

【讨论】：