Cloudinary新版React SDK v2使用时出现CORS跨域错误该如何解决？

你遇到的报错不是普通CORS配置错误，属于**跨源嵌入者策略（COEP）**拦截场景：你的前端页面开启了Cross-Origin-Embedder-Policy: require-corp响应头，要求所有跨源资源必须返回合法的CORS头或者CORP头才允许加载，Cloudinary默认返回的图片资源没有对应头，因此被浏览器拦截。
你在SDK里找不到CORS头配置是正常的：CORS响应头是Cloudinary服务端返回的，前端SDK只能配置请求的跨源模式，不能修改服务端返回的响应头。

步骤1：配置Cloudinary服务端响应头 #

这是最优先的永久解决方案，配置路径如下：

• 登录Cloudinary控制台，进入设置页面，打开安全选项卡
• 找到跨源资源共享 (CORS)配置区，添加你的前端项目域名（本地开发添加http://localhost:端口号，生产添加线上正式域名），允许请求方法勾选GET后保存
• 下拉到跨源资源策略 (CORP)配置区，选择cross-origin后保存配置，等待5-10分钟配置全局生效

步骤2：调整SDK请求配置 #

在Cloudinary React SDK v2中生成图片实例、渲染组件时，添加crossOrigin属性声明跨源请求模式：

import { Cloudinary } from "@cloudinary/url-gen";
import { AdvancedImage } from "@cloudinary/react";

const cld = new Cloudinary({
    cloud: {
        cloudName: "mycloudname",
    }
});
// 配置图片请求的跨源模式
const myImage = cld.image("sample", {
  delivery: {
    crossOrigin: "anonymous"
  }
});

// 渲染组件时同步添加crossOrigin属性
function ImageComponent() {
  return <AdvancedImage cldImg={myImage} crossOrigin="anonymous" alt="示例图" />
}

临时调试方案（仅本地开发用） #

如果需要临时调试不想等Cloudinary配置生效，可以临时关闭前端服务的COEP配置：

• Vite项目：在vite.config.ts中移除crossOriginEmbedderPolicy插件，或者设置为false
• Create React App项目：修改webpack devServer配置，删除响应头中的Cross-Origin-Embedder-Policy: require-corp字段

配置生效后清除浏览器缓存，重新加载页面即可正常加载图片，不会再触发对应报错。

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