使用创建预签名或获取预签名网址将表单数据文件从客户端上载到 S3 由于 CORS 而失败

Question

我正在使用React web应用程序，并试图上传一个文件到AWS S3。< br >我在本地(< code>localhost:3000)和部署到生产时(Vercel无服务器功能)都尝试过。

我首先使用 fetch 来检索文件上传的预签名 URL，这非常有效：

module.exports = async (req, res) => {
    let {fileName, fileType} = req.body;
    const post = await s3.createPresignedPost({
        Bucket: BUCKET_NAME,
        Fields: {
            key: fileName
        },
        ContentType: fileType,
        Expires: 60
    });
    res.status(200).json(post);

然后，在第二次提取时:

await fetch(url, {method: 'POST', body: formData}

我得到：

fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

我已设置权限 -

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

我还验证了代码中的桶名。

我试过：

< li >两个< code>getPresignedUrl

我已经尝试了所有方法，并浏览了数十篇文章（1，2）并浏览了此处的问题 - 但它仍然不起作用。不是本地的，也不是在生产中。

Answer 1

确保文件名与＜code＞键

const bucketParms = {
  Bucket: "sample-temp-bucket",
  Key: "HeadShot.jpg",
  Expires: 3600,
};

s3.getSignedUrl("putObject", bucketParms, (error, url) => {
  if (error) console.log("error", error);
  if (url) console.log("url", url);
});

在这里，我们可以测试从邮递员或卷曲生成的url

然后我们可以进行一个httpPUT调用。

this.http
  .put(
    "https://sample-temp-bucket.s3.amazonaws.com/HeadShot.jpg?X-Amz-Algorithm=AWS4-HMAC....",
    formData
  )
  .subscribe((response) => {
    console.log("response received is ", response);
  });

而CORS，ExposeHeaders的通配符不接受（至少从控制台），它只使用空数组“exposehaeders”：[]

Answer 2

在没完没了地研究了几个小时后，我发现了这个问题
CORS错误的原因是我没有在初始AWS.config中包含区域。更新配置设置。

一旦我添加了< code>region键，CORS错误就解决了:

const AWS = require('aws-sdk');

AWS.config.update({
    accessKeyId: 'XXXXX',
    secretAccessKey: 'XXXXXX',
    region: 'us-west-2', // Must be the same as your bucket
});

const s3Client = new AWS.S3();

由于未配置存储桶区域而返回的错误是CORS，这确实令人困惑和误导。