Vue项目中JS上传文件至S3遇CORS及权限问题求助

问题梳理 #

• 已通过createS3Url成功获取S3预签名POST URL及配置字段
• 初始遇到MaxPostPreDataLengthExceeded错误、localhost跨域CORS限制
• 调整文件键名为file并将其放在FormData最后后，仍存在权限类上传失败问题

核心解决方案 #

1. 配置S3桶CORS规则 #

localhost环境下必须在S3桶的CORS配置中允许本地源，示例配置如下（替换为你的Vue本地服务端口）：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["POST"],
        "AllowedOrigins": ["http://localhost:8080"],
        "ExposeHeaders": []
    }
]

• 开发阶段可临时用["*"]作为AllowedOrigins，生产环境务必指定具体域名
• AllowedMethods必须包含POST，与上传请求方法匹配

2. 严格对齐预签名请求的FormData结构 #

S3预签名POST对字段顺序、键名有严格要求，需按以下规则构建FormData：

• 先添加预签名返回的所有fields字段，最后添加文件
• 文件对应的键名必须与生成预签名时指定的键名一致（此处为file）

3. 修正fetch请求配置 #

避免添加S3预签名POST不允许的自定义请求头，显式指定跨域模式：

// 关键配置项
mode: 'cors',
credentials: 'omit' // S3无需携带凭证，避免触发额外头校验

修正后的完整代码 #

async function onFileChange(event) {
    const files = event.target.files || event.dataTransfer.files;
    if (!files.length) return;

    const package_file = files[0].name;
    // 先获取预签名数据，再构建FormData
    const [s3_data, ] = await wrapAsync(createS3Url, [{"package_file" : package_file}]);
    const url = s3_data.data.s3_package_url.url;
    const data = s3_data.data.s3_package_url.fields;

    const formData = new FormData();
    // 先添加预签名返回的所有配置字段
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            formData.set(key, data[key]);
        }
    }
    // 最后添加文件，键名固定为"file"
    formData.set("file", files[0]);

    try {
        const response = await fetch(url, {
            method: "POST",
            body: formData,
            mode: 'cors',
            credentials: 'omit'
        });

        if (!response.ok) {
            const errorDetail = await response.text();
            throw new Error(`S3上传失败: ${errorDetail}`);
        }
        console.log("文件上传成功");
    } catch (err) {
        console.error("上传错误详情:", err);
    }
}

4. 权限问题额外排查点 #

• 检查createS3Url生成预签名时的权限：需包含s3:PutObject权限，且有效期设置合理
• 检查S3桶策略：确保允许生成预签名的IAM用户/角色执行PutObject操作
• 检查文件大小：确认文件未超出预签名请求中指定的content-length-range限制

内容的提问来源于stack exchange，提问作者user422005