使用Mapbox凭证向S3上传文件时遭遇CORS错误求助

直接使用S3 SDK的PutObjectCommand发起请求会触发浏览器预飞OPTIONS请求，而你无法控制的目标S3桶未配置允许你的源站（https://localhost:1234）的CORS规则，因此必须改用Mapbox官方设计的上传方式：

方案：用预签名POST表单上传 #

Mapbox返回的临时上传凭证会包含表单签名所需的参数（若当前getCredentials未返回这些参数，需改为调用Mapbox的创建上传任务接口获取完整凭证），通过FormData构造POST请求上传：

修改后的代码 #

async function upload() {
    const credentials = await getCredentials(USERNAME, SECRET_KEY);
    // 确保credentials包含 bucket、key、policy、signature、X-Amz-Algorithm 等参数

    const file = document.querySelector('input[type="file"]').files[0];
    const formData = new FormData();

    // 填入Mapbox返回的签名参数
    formData.append('key', credentials.key);
    formData.append('bucket', credentials.bucket);
    formData.append('X-Amz-Algorithm', credentials.algorithm);
    formData.append('X-Amz-Credential', credentials.credential);
    formData.append('X-Amz-Date', credentials.date);
    formData.append('X-Amz-Signature', credentials.signature);
    formData.append('Policy', credentials.policy);
    formData.append('acl', credentials.acl);

    // 添加待上传文件
    formData.append('file', file);

    try {
        const response = await fetch(`https://${credentials.bucket}.s3.us-east-1.amazonaws.com/`, {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            console.log('上传完成');
            // 后续可调用Mapbox接口确认上传状态
        } else {
            console.error('上传失败:', await response.text());
        }
    } catch(e) {
        console.error('请求异常:', e);
    }
}

原理 #

• 表单上传的POST请求不会触发浏览器的严格预飞检查，且Mapbox的S3桶CORS配置允许这种请求方式
• Mapbox的临时上传机制本身就是为表单上传设计，而非直接的PutObject调用

注意点 #

• 若上传Shapefile，需将所有关联文件（.shp、.shx、.dbf等）压缩为zip包后上传，符合Mapbox的上传规范
• 确保getCredentials获取的是完整的上传凭证，包含所有表单所需的签名参数

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