React/Redux对接Cloudinary遭遇CORS跨域问题求助

你碰到的问题核心是HTTPS环境下浏览器/axios自动添加了authorization请求头，但Cloudinary的预检响应并没有允许这个字段，所以被CORS策略拦截了。之前HTTP环境正常是因为HTTP下不会触发这个自动添加头的行为，而且你自己的server.js CORS配置其实管不到Cloudinary的API请求——因为你是直接调用Cloudinary的接口，不是请求自己的后端，所以那部分配置没用。

下面是针对性的解决方案，结合你的代码来调整：

1. 调整Cloudinary请求的头信息，移除不必要的字段 #

你的axios请求里加了X-Requested-With，但对于FormData类型的上传请求来说，这个头不是必须的，反而可能让浏览器做额外的处理。另外，要明确移除authorization头，避免浏览器或全局axios配置自动加上它：

修改你的请求配置部分：

axios.post('https://api.cloudinary.com/v1_1/********/image/upload', formData, {
  headers: {
    // 移除不需要的X-Requested-With头
    // "X-Requested-With": "XMLHttpRequest",
    // 明确设置authorization为undefined，强制移除这个头
    "authorization": undefined
  }
})

2. 确认Cloudinary上传参数的正确性 #

你已经添加了skipAuthorization: true到FormData里，这个参数是对的——它会告诉Cloudinary不需要验证Authorization头，但要确保这个字段确实被正确传递了。可以在发送请求前打印formData的内容确认一下：

console.log([...formData.entries()]); // 检查所有字段是否正确

3. 检查全局axios拦截器（关键！） #

如果你的项目里配置了axios全局请求拦截器，比如给所有请求自动添加Authorization头（比如携带用户token），那这个拦截器会影响到Cloudinary的请求，自动加上authorization头，这就会触发CORS问题。

你需要修改拦截器，只给你自己的后端API（比如/api/开头的接口）添加这个头，跳过Cloudinary的请求：

// 示例全局拦截器修改
axios.interceptors.request.use(config => {
  // 仅对自己的后端API添加Authorization头
  if (config.url.startsWith('/api/')) {
    config.headers.authorization = `Bearer ${yourUserToken}`;
  }
  // 对于Cloudinary这类外部API，不添加这个头
  return config;
});

为什么之前HTTP环境正常？ #

HTTP协议下，浏览器不会自动给跨域请求添加authorization头，而且如果你的全局拦截器没有特殊处理，也不会触发这个问题。切换到HTTPS后，浏览器的安全策略更严格，加上如果有全局拦截器的存在，就自动带上了这个头，导致Cloudinary的预检不通过。

按照上面的步骤调整后，应该就能解决这个CORS问题了。

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