使用html2pdf时html2canvas加载跨域图片的CORS问题解决求助

问题背景 #

使用html2pdf.js生成PDF时，遇到CSS背景图的CORS错误：

Access to image at 'https://bucket-name.s3.ap-northeast-1.amazonaws.com/image.jpg' from origin 'https://client.exampledomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

核心矛盾：

• 生产环境S3仅在请求携带Origin: https://client.exampledomain.com头时，才返回合法的Access-Control-Allow-Origin响应头
• html2canvas（html2pdf依赖的渲染库）请求CSS背景图时，默认不会携带Origin头，导致S3拒绝
• Chrome缓存机制会复用首次无Origin的请求结果，加剧问题
• CSS背景图无法通过crossorigin="anonymous"属性触发跨域请求模式

可行解决方案 #

方案1：通过onclone钩子手动替换背景图为Blob URL #

在html2canvas克隆DOM的阶段，手动用fetch携带Origin头获取图片，转换为Blob URL后替换原背景图，绕开缓存和CORS限制：

html2pdf(someNode, {
  margin: 3,
  filename: 'name.pdf',
  image: { type: 'jpeg', quality: 0.98 },
  html2canvas: {
    scale: 2,
    useCORS: true,
    width: 1300,
    allowTaint: false,
    logging: false,
    // 克隆DOM时修改背景图
    onclone: async (clonedDoc) => {
      const targetImgUrl = 'https://bucket-name.s3.ap-northeast-1.amazonaws.com/image.jpg';
      const elements = clonedDoc.querySelectorAll(`[style*="${targetImgUrl}"]`);
      
      for (const el of elements) {
        try {
          // 手动发送带Origin头的请求
          const res = await fetch(targetImgUrl, {
            headers: { 'Origin': 'https://client.exampledomain.com' },
            credentials: 'omit'
          });
          const blob = await res.blob();
          const blobUrl = URL.createObjectURL(blob);
          el.style.backgroundImage = `url(${blobUrl})`;
        } catch (err) {
          console.error('替换背景图失败:', err);
        }
      }
    }
  },
  jsPDF: {
    format: 'A4',
    orientation: 'landscape',
    unit: 'mm'
  },
  enableLinks: false
}).then(() => {
  // 清理Blob URL，避免内存泄漏
  document.querySelectorAll('[style*="blob:"]').forEach(el => {
    const urlMatch = el.style.backgroundImage.match(/blob:.+?(?=")/);
    if (urlMatch) URL.revokeObjectURL(urlMatch[0]);
  });
});

方案2：配置自定义代理服务器自动添加Origin头 #

当前配置的proxy直接指向S3是无效的，需要搭建自己的代理服务器，在转发请求时手动添加Origin头：

1. 搭建简单Node.js代理（示例）

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy', async (req, res) => {
  try {
    const imgUrl = req.query.url;
    const response = await axios.get(imgUrl, {
      headers: { 'Origin': 'https://client.exampledomain.com' },
      responseType: 'stream'
    });
    response.data.pipe(res);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(3000, () => console.log('Proxy running on port 3000'));

2. 修改html2pdf配置

html2canvas: {
  // ...其他配置
  proxy: 'https://your-proxy-domain.com/proxy' // 替换为你的代理地址
}

代理会自动给转发的图片请求添加Origin头，S3将返回合法的CORS响应头。

方案3：强制禁用缓存（配合其他方案） #

通过给图片URL添加随机参数，避免Chrome复用无Origin的缓存请求，可配合方案1/2使用：

onclone: (clonedDoc) => {
  const targetImgUrl = 'https://bucket-name.s3.ap-northeast-1.amazonaws.com/image.jpg';
  const elements = clonedDoc.querySelectorAll(`[style*="${targetImgUrl}"]`);
  
  elements.forEach(el => {
    const originalUrl = el.style.backgroundImage.match(/https:.+?(?=")/)[0];
    // 添加时间戳参数，绕过缓存
    const noCacheUrl = `${originalUrl}?t=${Date.now()}`;
    el.style.backgroundImage = `url(${noCacheUrl})`;
  });
}

方案4：调整S3 CORS规则（若有权限） #

如果可以修改S3的CORS配置，可添加允许特定Origin的规则，同时兼容无Origin头的请求：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://client.exampledomain.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <!-- 允许无Origin头的请求（可选，根据需求） -->
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

注意：添加*规则会降低安全性，仅在必要时使用。

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