解决Vue项目中Firebase Storage图片因CORS无法生成PDF的问题

你的问题核心是CORS跨域限制：浏览器页面能正常加载Firebase Storage图片，但html2canvas渲染DOM到canvas时，会发起跨域请求读取图片资源，而Firebase Storage默认规则不允许这种操作，导致图片无法被canvas捕获，最终PDF中无图。以下是针对性解决方案：

1. 配置Firebase Storage的CORS规则 #

这是根治问题的方法，允许你的Netlify域名跨域访问存储资源：

• 本地创建cors.json文件，填入规则：

[
  {
    "origin": ["https://你的Netlify域名.netlify.app"], // 替换为实际域名
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

测试阶段可临时用["*"]允许所有域名，生产环境务必指定具体域名。

• 通过Firebase CLI部署规则：

firebase storage:rules:deploy cors.json

2. 调整html2canvas的跨域配置 #

在调用html2canvas时，开启跨域支持参数：

html2canvas(invoiceContent.value, {
  width: doc.internal.pageSize.getWidth(),
  height: doc.internal.pageSize.getHeight(),
  useCORS: true, // 强制处理跨域图片
  allowTaint: false // 防止画布被污染
}).then((canvas) => {
  // 原有PDF生成逻辑不变
});

3. 预转图片为Base64（备选方案） #

如果CORS配置仍有问题，可将Firebase图片先转为Base64格式再渲染，彻底规避跨域：

• 添加转Base64的工具方法：

const convertToBase64 = async (imgUrl) => {
  const res = await fetch(imgUrl, { mode: 'cors' });
  const blob = await res.blob();
  return new Promise(resolve => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
};

• 在组件中预加载并转换图片：

import { ref, onMounted } from 'vue';

const base64Avatar = ref('');

onMounted(async () => {
  if (props.invoice.avatar) {
    base64Avatar.value = await convertToBase64(props.invoice.avatar);
  }
});

• 修改组件引用：

<AppAvatarImage :src="base64Avatar" />

4. Netlify部署说明 #

无需额外部署Express代理，上述方案均能在Netlify环境正常运行。若使用Base64方案，注意控制图片大小，避免页面性能问题。

验证：完成配置后重新部署Netlify应用，测试PDF生成功能，图片即可正常显示。

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