React应用上传图片至Cloudinary时遭遇CORS问题求助

核心问题分析 #

错误提示明确指出：当请求的credentials模式为include时，响应的Access-Control-Allow-Credentials头必须为true，但当前响应的这个头为空。结合你的代码，问题出在不必要的凭据设置和错误的请求配置上。

具体修复步骤 #

1. 移除credentials:'include'配置 #

前端向Cloudinary上传图片不需要携带用户凭据（如Cookie），保留这个配置会强制要求Cloudinary返回Access-Control-Allow-Credentials: true，而你的CORS配置未满足这个要求，直接移除即可：

const response = await fetch(cloudinaryUploadUrl, {
    method: 'POST',
    // 移除 credentials:'include'
    body: formData,
    // 移除Authorization头，原因见下一步
});

2. 修复formData并移除不安全的Authorization头 #

• 你代码中重复创建了formData，导致初始添加的upload_preset丢失，需要在循环添加文件后统一添加这个参数；
• 前端上传Cloudinary不需要使用Authorization: Bearer头，这个头属于后端API调用的认证方式，放在前端会暴露你的API密钥，同时会触发额外的预检请求，加剧CORS问题。

修正后的完整代码：

const handleImageUpload = async () => {
    try {
        const formData = new FormData();

        // 添加上传预设（未签名上传的必填参数）
        formData.append('upload_preset', "<upload_preset>");
        
        // 循环添加图片文件
        for (const image of images) {
            formData.append('file', image);
        }

        const cloudinaryUploadUrl = 'https://api.cloudinary.com/v1_1/<cloud_name>/image/upload';

        const response = await fetch(cloudinaryUploadUrl, {
            method: 'POST',
            body: formData,
            // 无需自定义headers，浏览器会自动处理multipart/form-data类型的请求头
        });

        console.log(response);
        if (response.ok) {
            const data = await response.json();
            console.log(data);
        } else {
            console.error('上传失败:', response.statusText);
        }

    } catch (error) {
        console.error('上传出错:', error);
    }
};

3. 检查Cloudinary的CORS配置 #

确保你的Cloudinary账户CORS设置包含以下内容：

• Allowed origins：添加http://localhost:5173（生产环境需补充对应域名）
• Allowed methods：至少包含POST和OPTIONS（预检请求依赖OPTIONS方法）
• Allowed headers：留空或包含Content-Type即可，浏览器会自动处理formData的请求头

补充说明 #

• 前端上传务必使用未签名上传预设（在Cloudinary控制台的上传设置中创建，需勾选"未签名"选项）；
• API密钥绝对不能暴露在前端代码中，所有需要密钥的操作（如签名上传）必须在后端完成。

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