amazon-web-services - 由于 CORS，使用 createPresignedPost 或 getPresignedUrl 将 formData 文件从客户端上传到 S3 失败

Question

我正在使用 React Web 应用程序并尝试将文件上传到 AWS S3。
我已经在本地（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'

我已在存储桶配置中正确设置了 Permissions -> CORS json：

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

我还在我的代码中验证了存储桶名称。

我试过了：

• 都getPresignedUrl&createPresignedPost来生成 url
• 两者PUT&POST请求
• 在获取请求中设置标头 ( Content-Type, )x-amz-acl
• 使用不同的 CORS json，允许所有来源，公开不同的标头，允许所有方法（包括HEAD，允许不同的标头（如"Content-*"）
• 为不同的用户配置不同的权限（特别是我需要的，所有 S3 权限等）
• 设置存储桶策略
• 每次尝试前清除 Chrome 的缓存（使用硬重载）或通过代码

我已经尝试了所有方法并阅读了数十篇文章（1、2）并在此处浏览了问题 - 但它仍然无法正常工作。不在本地，也不在生产中。

标签： amazon-web-servicesamazon-s3corsfetchmultipartform-data

Answer 1

经过无数小时的研究，我发现了这个问题。
CORS 错误的原因是我没有region在初始AWS.config.update配置设置中包含 。

一旦我添加了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，这确实令人困惑和误导。