react-pdf引入Firebase存储图片时的CORS问题求助

核心原因 #

HTML img 标签的跨域机制与react-pdf的Image组件不同：前者在未设置crossOrigin时会发起不携带Origin的请求，不会触发严格的CORS预检；而react-pdf内部通过XMLHttpRequest加载资源，会严格校验服务器返回的Access-Control-Allow-Origin响应头，这就是为什么前者能正常显示，后者报错。

解决方案步骤 #

1. 确保Firebase存储的CORS配置生效 #

• 先验证当前配置是否生效：执行curl -H "Origin: http://localhost:3000" -I "你的图片URL"，查看响应头是否包含Access-Control-Allow-Origin: *或http://localhost:3000
• 如果没有响应头，重新配置CORS：
  1. 创建cors.json文件，内容为：

     [
       {
         "origin": ["http://localhost:3000"],
         "method": ["GET"],
         "maxAgeSeconds": 3600
       }
     ]
     

  2. 执行命令应用配置：gsutil cors set cors.json gs://你的存储桶名称
• 注意：已上传的旧图片需要重新上传，因为Firebase存储不会自动更新已有文件的响应头缓存。

2. 调整react-pdf Image组件的代码 #

简化请求配置，确保跨域参数正确传递：

const imageOptions = {
  crossOrigin: 'anonymous',
};

<Image
  key={imageIndex}
  style={{ width: 100, height: 100 }}
  options={imageOptions}
  src={file.url}
/>

无需手动设置method、headers等参数，react-pdf会自动处理GET请求。

3. 绕开CORS：转成Base64加载 #

如果上述方法仍无效，可以将图片转为Base64格式后传入react-pdf，彻底避开跨域限制：

// 工具函数：获取图片Base64
async function getImageBase64(url) {
  const response = await fetch(url, { mode: 'cors' });
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

// 组件内使用
const [base64Image, setBase64Image] = useState('');

useEffect(() => {
  getImageBase64(file.url).then(setBase64Image);
}, [file.url]);

<Image
  key={imageIndex}
  style={{ width: 100, height: 100 }}
  src={base64Image}
/>

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