调用Imgur API上传图片触发CORS预检响应头不允许错误如何解决

问题原因 #

• 你错误地将响应头Access-Control-Allow-Origin加到了请求头中，这个头是服务端返回响应时设置的，不需要客户端主动发送。自定义的请求头会触发浏览器的CORS预检请求，Imgur的服务器没有允许这个头，因此直接拦截了你的请求，返回跨域报错。
• Postman不受浏览器同源策略限制，不会自动发送预检请求，所以测试可以正常通过，和浏览器端的运行逻辑有本质区别。

修复方案 #

直接删除代码中添加Access-Control-Allow-Origin请求头的行即可，无需额外修改其他配置，修正后代码如下：

var myHeaders = new Headers();
myHeaders.append("Authorization", "Client-ID ******");
// 移除掉错误添加的Access-Control-Allow-Origin请求头

var formdata = new FormData();
formdata.append("image", image);

var requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: formdata,
  redirect: "follow",
};

fetch("https://api.imgur.com/3/upload", requestOptions)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.log("error", error));

额外注意事项 #

• 不要手动给FormData请求添加Content-Type头，浏览器会自动识别FormData对象并填充携带正确boundary参数的请求头，手动配置反而会导致请求解析失败。
• 如果你是直接本地打开HTML文件（地址栏为file://开头的协议），依然会触发跨域限制，需要用本地静态服务启动项目，比如VS Code的Live Server插件、Python自带的http.server模块都可以快速启动本地服务。

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