尝试使用 React 和 Express 将图像上传到 aws S3 时出现 HTTP put 请求错误答案

【问题标题】：HTTP put request error when trying to upload images to aws S3 using React and Express尝试使用 React 和 Express 将图像上传到 aws S3 时出现 HTTP put 请求错误
【发布时间】：2021-09-10 13:20:15
【问题描述】：

我正在尝试使用 React 和 express 将图像上传到 aws s3。我的 React 代码是，

axios
 .put(putUrl, file[0], options)
 .then(() => {
          console.log("hello world");
 })
 .catch(err => {
          console.log(err);
 })

this put Url 是在调用上述代码之前使用此代码通过 express 生成的。而file就是添加的files数组，

generatePutUrl(Key, ContentType).then(putUrl => {
        res.send({putUrl});
        console.log({putUrl});
    }).catch(err => {
        res.send(err);
    });

选项有这个，

const options = {
            params: {
                Key: key,
                ContentType: contentType
            },
            headers: {
                'Content-Type':contentType
            }
        };

此键（例如：“example.png”）具有图像名称，而 contentType 是图像类型（例如：“image/png”）。当我尝试上传图片时，它会显示这两条错误消息，并且图片未上传到 S3 存储桶。

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)


PUT <generatedUrl> net::ERR_NAME_NOT_RESOLVED

这个是生成的S3 url的值。当我从快速服务器获取生成的 URL 时，它的 get 请求工作正常。但是 put request 显示了这个错误。可能是什么错误？

【问题讨论】：

标签： reactjs amazon-web-services express amazon-s3 axios

【解决方案1】：

我已经像这样更新了存储桶策略。我添加了 "s3:PutObject" 然后错误就消失了。

{
    "Version": "2012-10-17",
    "Id": "Policy1624878606419",
    "Statement": [
        {
            "Sid": "Stmt1624878601700",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}

【讨论】：