React中用Axios向Cloudinary多文件上传遇CORS及签名问题

一、先搞定CORS错误 #

你遇到的Request header field Authorization is not allowed by Access-Control-Allow-Headers错误，大概率是这两个原因之一：

• Axios全局携带了Authorization头
  如果你的项目给Axios全局配置了Authorization（比如登录后的token），这个头会自动附加到所有请求里，但Cloudinary的CORS默认不允许这个头。解决方法是在上传请求里覆盖全局headers，移除Authorization：

  return axios.post(url, formData, {
    headers: {
      "X-Requested-With": "XMLHttpRequest",
      // 覆盖全局的Authorization头，避免被携带
      Authorization: undefined
    },
  })
  

• Cloudinary CORS配置未允许所需头
  进入Cloudinary控制台的「Settings -> Security -> CORS Configuration」，确保你的CORS规则包含允许的Headers，比如添加Authorization、X-Requested-With这些。示例配置可以是：

  [
    {
      "allowed_origins": ["你的前端域名"],
      "allowed_methods": ["POST"],
      "allowed_headers": ["Content-Type", "X-Requested-With", "Authorization"],
      "max_age": 300
    }
  ]
  

二、Axios中正确配置Cloudinary上传参数（对应SuperAgent的field方法） #

你提到的SuperAgent里用field添加签名等参数，在Axios里其实就是把这些参数append到FormData中，但这里有个关键安全提醒：签名（signature）必须在服务端生成，绝对不能在前端代码里计算——因为Cloudinary的secretKey一旦暴露在前端，任何人都能操作你的云存储资源，风险极高！

情况1：使用Unsigned上传预设（推荐前端直接上传） #

如果你的上传预设是「Unsigned」（在Cloudinary控制台创建上传预设时勾选），前端只需要传递upload_preset即可，不需要api_key、timestamp、signature：

uploadFile(){
  const uploaders = this.state.filesToBeSent.map(file => {
    const formData = new FormData();
    formData.append("file", file);
    // 只需要上传预设，其他参数不需要
    formData.append("upload_preset", "你的上传预设名称");
    
    return axios.post("https://api.cloudinary.com/v1_1/你的cloud名称/image/upload", formData, {
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        Authorization: undefined // 移除可能的全局Authorization头
      },
    }).then(response => {
      const data = response.data;
      const fileURL = data.secure_url;
      console.log("单个文件上传成功：", data);
      return fileURL; // 返回URL方便后续处理
    }).catch(err => {
      console.error("上传失败：", err);
      throw err;
    });
  });

  // 等待所有文件上传完成
  axios.all(uploaders).then(uploadedUrls => {
    console.log("所有文件上传完成，URL列表：", uploadedUrls);
    // 这里做上传后的操作，比如把URL存到数据库等
  }).catch(err => {
    console.error("部分文件上传失败：", err);
  });
}

情况2：使用Signed上传预设（需要服务端配合） #

如果必须用Signed上传，那签名的计算必须放在服务端：

1. 前端向你的后端发送请求，传递文件名/文件信息，后端生成timestamp、signature（用secretKey计算）
2. 前端拿到后端返回的timestamp、signature、api_key后，再append到FormData中：

// 先调用后端接口获取签名参数
axios.get("/api/get-cloudinary-signature").then(res => {
  const { api_key, timestamp, signature } = res.data;
  
  const uploaders = this.state.filesToBeSent.map(file => {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", "你的Signed上传预设");
    formData.append("api_key", api_key);
    formData.append("timestamp", timestamp);
    formData.append("signature", signature);
    
    return axios.post("https://api.cloudinary.com/v1_1/你的cloud名称/image/upload", formData, {
      headers: {
        "X-Requested-With": "XMLHttpRequest",
        Authorization: undefined
      },
    }).then(response => {
      const fileURL = response.data.secure_url;
      return fileURL;
    });
  });
  
  axios.all(uploaders).then(uploadedUrls => {
    console.log("所有文件上传完成：", uploadedUrls);
  });
});

三、为什么你的原代码会有问题？ #

你原代码里在FormData中添加了api_key和timestamp，但如果是Unsigned上传，这些参数是多余的；如果是Signed上传，缺少签名且在前端计算签名会暴露secretKey，同时可能因为Axios携带了额外的Authorization头触发CORS错误。

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