Cloudinary上传base64图片返回无效JSON响应报错如何解决

问题根因 #

你遇到的404 + Unexpected token < in JSON报错本质是请求发送到了错误的地址，Cloudinary返回了404状态的HTML错误页面，SDK尝试把HTML内容解析为JSON失败触发报错，和你使用的base64图片内容无关。

排查与修复步骤 #

• 第一步：核对配置参数
  优先确认cloud_name、api_key、api_secret三个参数完全正确，不要填混、不要带多余空格或特殊字符。测试阶段可以先把三个参数硬编码写入配置，排除环境变量读取错误的问题。
• 第二步：修正SDK引入方式
  你调用的是v2版本的接口，引入SDK时必须明确指定v2，否则会默认调用v1版本接口导致请求路径错误触发404，正确引入写法：

  const cloudinary = require('cloudinary').v2; // Node.js环境
  // 前端环境引入对应v2版本的SDK即可
  

• 第三步：调整上传参数
  上传时增加secure: true参数强制走HTTPS协议，避免部分环境下HTTP请求跳转导致的错误。

可运行参考代码 #

Node.js后端环境

const cloudinary = require('cloudinary').v2;

// 硬编码测试配置，替换为你自己的实际参数
cloudinary.config({
  cloud_name: '替换为你的cloud_name',
  api_key: '替换为你的api_key',
  api_secret: '替换为你的api_secret',
});

const testBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const uploadImage = async () => {
  try {
    const result = await cloudinary.uploader.upload(testBase64, {
      folder: "UserPhoto",
      width: 150,
      crop: "scale",
      secure: true
    });
    console.log('上传成功', result);
  } catch (err) {
    console.error('上传错误', err);
  }
}

uploadImage();

前端浏览器环境

注意不要在前端代码暴露api_secret，需要先在Cloudinary后台创建未签名上传预设，上传时携带upload_preset参数即可：

const testBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const uploadImage = async () => {
  try {
    const result = await cloudinary.uploader.upload(testBase64, {
      upload_preset: '替换为你创建的未签名上传预设名',
      folder: "UserPhoto",
      width: 150,
      crop: "scale",
      secure: true
    });
    console.log('上传成功', result);
  } catch (err) {
    console.error('上传错误', err);
  }
}

uploadImage();

额外排查点 #

如果以上配置全部正确仍然报错，检查当前网络环境是否能正常访问Cloudinary的API接口，是否有代理、防火墙拦截了请求，部分地区网络访问Cloudinary存在不稳定的情况，可尝试切换网络测试。

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