Cloudinary上传API使用q_参数遇404及CORS问题求助

错误原因 #

你错误地将画质参数q_20直接追加到了上传接口的路径末尾，这不符合Cloudinary的API调用规范。Cloudinary的上传接口路径是固定的/v1_1/{cloud_name}/{resource_type}/upload，参数不能直接作为路径的一部分，否则会被识别为不存在的接口端点，返回404；同时404响应通常没有配置CORS头，因此触发了“blocked by cors”错误。

解决方案 #

有两种正确的方式添加画质参数：

1. 将参数作为查询参数拼接在URL后

把q_20作为查询参数，用?连接在URL末尾即可：

return fetch(`https://api.cloudinary.com/v1_1/${CLOUD_NAME}/${type === 'img' ? 'image' : 'video'}/upload?q_20`)

如果需要多个参数，用&分隔，比如同时设置自动画质和MP4格式：

return fetch(`https://api.cloudinary.com/v1_1/${CLOUD_NAME}/video/upload?q_auto&f_mp4`)

2. 在FormData中添加参数（推荐前端上传场景）

前端上传文件时，Cloudinary更推荐将转换参数放在FormData中传递，这种方式更规范，也支持更多复杂参数：

// 构建FormData
const formData = new FormData();
formData.append('file', yourVideoFile); // 替换为你的视频文件对象
formData.append('upload_preset', 'your_un_signed_upload_preset'); // 必须配置未签名上传预设
formData.append('quality', '20'); // 对应q_20，设置为'auto'即对应q_auto
// 可选：添加其他视频转换参数，比如指定格式
formData.append('format', 'mp4');

// 发起上传请求
return fetch(`https://api.cloudinary.com/v1_1/${CLOUD_NAME}/${type === 'img' ? 'image' : 'video'}/upload`, {
  method: 'POST',
  body: formData
});

注意：前端直接上传必须配置未签名的上传预设，在Cloudinary控制台的“设置”->“上传”->“上传预设”中创建，将“签名模式”设为“未签名”。

额外注意事项 #

• 确认Cloudinary控制台的“安全”设置中，已将http://localhost:3000添加到“CORS允许来源”列表，避免CORS相关错误。
• 画质参数q的取值范围是1-100，q_auto会让Cloudinary自动选择最优画质。

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