Next.js部署至Vercel后，图片/文件上传Cloudinary失败解决方案咨询

1. 核对环境变量配置 #

• 本地开发用的.env文件里的Cloudinary密钥（CLOUDINARY_API_KEY、CLOUDINARY_API_SECRET、CLOUDINARY_CLOUD_NAME等），必须在Vercel项目的「Settings > Environment Variables」中重新添加，且要选择「Production」环境生效，不能依赖本地配置。
• 部署后可在Vercel函数日志中打印非敏感环境变量（如CLOUDINARY_CLOUD_NAME），验证是否正确加载。

2. 修复API路由或CORS问题 #

• 若用Next.js API路由做上传中转：
  • 不要在路由里做本地文件存储操作，Vercel无服务器函数不支持持久化存储，直接用Cloudinary SDK处理上传流。
  • 调整API路由的请求限制和CORS头：

    export const config = {
      api: {
        bodyParser: { sizeLimit: '4mb' }, // 根据文件大小调整
      },
    };
    
    // 在路由处理函数开头设置CORS
    res.setHeader('Access-Control-Allow-Origin', process.env.NEXT_PUBLIC_VERCEL_URL || '*');
    res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    

• 若前端直接上传：
  • 登录Cloudinary控制台，在「Settings > Upload > Allowed Origins」中添加Vercel部署后的域名（如https://your-project.vercel.app），避免CORS拦截。

3. 检查Cloudinary权限与上传规则 #

• 确认Cloudinary API密钥未开启IP白名单限制（Vercel IP动态，无法固定），或已将Vercel的IP范围加入白名单。
• 核对上传文件的格式、大小是否在Cloudinary允许范围内（默认单文件上限100MB，特殊格式需提前在控制台开启支持）。
• 若用签名上传，确保后端生成签名的逻辑在本地和生产环境一致，避免因环境变量差异导致签名无效。

4. 排查Vercel部署配置 #

• 检查next.config.js，若使用output: 'standalone'，需确认Cloudinary SDK被正确打包进生产依赖，未被误排除。
• 查看Vercel的「Functions」日志，根据上传请求的错误码（401权限错误、403 CORS错误、500服务端错误等）定位具体问题。

5. 前端上传的关键注意事项 #

• 绝对不要在客户端代码中暴露CLOUDINARY_API_SECRET，必须通过后端中转或使用签名上传方式。
• 确认前端上传的Cloudinary接口地址正确：https://api.cloudinary.com/v1_1/${cloudName}/upload，无拼写错误。

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