React PDF加载CDN图片触发CORS策略错误的问题排查与解决

问题场景 #

在React PDF中使用自定义CDN图片链接（https://cdn.flyfarint.com/WL/FFA1926/FFSA1008/companylogo.png）时，通过以下代码无法加载图片，触发CORS策略错误，但加载谷歌等公共来源的图片正常：

<Image
  style={{ border: "2px solid red", height: "70px" }}
  src={
    "https://cdn.flyfarint.com/WL/FFA1926/FFSA1008/companylogo.png"
  }
/>

原因分析 #

• 目标CDN服务器未配置允许当前域名的跨域请求（CORS）响应头，比如Access-Control-Allow-Origin。React PDF加载外部资源时遵循浏览器CORS规则，当服务器未返回允许当前域名访问的头信息时，浏览器会拦截资源加载，抛出CORS错误。
• 谷歌等公共图片源默认配置了宽松的CORS策略（如允许任意域名访问），因此可以正常加载。

解决方法 #

方法1：配置CDN的CORS规则 #

联系CDN服务商或服务器管理员，在CDN配置中添加允许当前域名（生产环境不建议用*）的Access-Control-Allow-Origin响应头，按需补充Access-Control-Allow-Methods等相关头信息。

方法2：将图片转为Base64嵌入 #

若无法修改CDN配置，可先下载图片到本地，转换为Base64编码，直接在Image组件中使用Base64字符串作为src值：

<Image
  style={{ border: "2px solid red", height: "70px" }}
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." // 替换为实际Base64编码
/>

方法3：使用后端代理 #

搭建后端服务作为中间层，请求目标CDN图片后再返回给前端，前端直接请求自身后端接口规避跨域：

// Node.js/Express代理示例
app.get('/proxy-image', async (req, res) => {
  const imageUrl = 'https://cdn.flyfarint.com/WL/FFA1926/FFSA1008/companylogo.png';
  try {
    const response = await fetch(imageUrl);
    const buffer = await response.buffer();
    res.set('Content-Type', 'image/png');
    res.send(buffer);
  } catch (err) {
    res.status(500).send('图片加载失败');
  }
});

前端代码修改为：

<Image
  style={{ border: "2px solid red", height: "70px" }}
  src="/proxy-image"
/>

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