已启用CORS仍遭API网关拦截：Cloudinary图片上传请求报错

嘿，我刚看完你的问题，这个CORS错误其实是前端常见的误区导致的，我来一步步帮你解决：

首先得理清楚问题根源：你在Axios请求里加的那些Access-Control-Allow-Origin、Access-Control-Allow-Headers这类头，是服务器端（也就是Cloudinary）应该返回给浏览器的响应头，不是你前端请求要带的头，加了这些不仅没用，还可能干扰正常请求。另外，你把Content-Type设成了application/x-www-form-urlencoded，但你用的是FormData，这个请求的正确类型应该是multipart/form-data，不过Axios会自动识别FormData并设置正确的Content-Type，所以手动设置反而出错了。

接下来是具体的解决步骤：

1. 配置Cloudinary的CORS规则，允许你的前端域名 #

登录你的Cloudinary控制台，按以下步骤操作：

• 点击顶部的「Settings」（设置）
• 切换到「Security」（安全）标签页
• 找到「CORS Configuration」（CORS配置）区域
• 点击「Add new」添加一条规则：
  • Origin：填入你的前端域名http://127.0.0.1:3000（生产环境记得换成正式域名）
  • Methods：选择POST（因为你是上传请求）
  • Allowed Headers：可以填*（允许所有头），或者按需填写
  • Allow Credentials：如果你的请求需要带凭证（比如Cookie）就勾选，否则可以不选
• 保存配置，等待几分钟让设置生效（Cloudinary的配置可能需要一点时间同步）

2. 修正你的前端请求代码 #

删掉那些多余的CORS相关请求头，也不用手动设置Content-Type，修正后的代码如下：

const fd = new FormData();
fd.append('photos', file);
fd.append('upload_preset', CLOUDINARY_UPLOAD_PRESET);

axios({
  url: CLOUDINARY_API,
  method: 'POST',
  data: fd
}).then(function(res) {
  console.log(res);
}).catch(function(err) {
  console.error(err);
})

额外检查点 #

如果做完上面两步还是有问题，记得确认：

• 你的CLOUDINARY_UPLOAD_PRESET是**无签名（unsigned）**的上传预设——前端直接上传必须用unsigned的预设，不能用signed的
• 在Cloudinary控制台的「Upload Settings」里，确认这个上传预设的「Mode」是「Unsigned」，并且允许匿名上传

这样应该就能解决你的CORS问题了！

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