使用fetch和FileReader生成Base64字符串失败的问题排查

问题根源 #

你用mode: 'no-cors'发起fetch请求时，得到的是不透明响应（opaque response）——浏览器虽然会完成请求，但会完全禁止JavaScript访问响应体内容。这就是为什么你的Blob是空的，转成Base64后只有前缀，网络面板能看到请求但JS拿不到数据。

解决方案 #

浏览器扩展拥有原生页面没有的权限，可以绕过CORS限制，以下是两种可行方案：

方案一：利用后台脚本处理请求（推荐Manifest V3） #

后台脚本不受页面CORS规则约束，适合处理跨域资源请求：

1. 配置manifest.json
   添加目标图片域名的权限和后台脚本声明：

{
  "permissions": ["https://目标图片域名/*"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://你要处理的网站域名/*"],
      "js": ["content.js"]
    }
  ]
}

2. 内容脚本（content.js）发送请求
   向后台脚本发送消息，请求转换图片：

async function getThumbBase64(thumbUrl) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage(
      { action: "urlToBase64", url: thumbUrl },
      (response) => {
        if (response.error) reject(new Error(response.error));
        else resolve(response.base64);
      }
    );
  });
}

// 调用示例
const base64String = await getThumbBase64(thumb);

3. 后台脚本（background.js）处理转换
   完成fetch和Base64转换，返回结果：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "urlToBase64") {
    (async () => {
      try {
        const response = await fetch(request.url);
        if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
        const blob = await response.blob();
        
        const reader = new FileReader();
        reader.onloadend = () => sendResponse({ base64: reader.result });
        reader.onerror = () => sendResponse({ error: reader.error.message });
        reader.readAsDataURL(blob);
      } catch (err) {
        sendResponse({ error: err.message });
      }
    })();
    return true; // 标记为异步响应
  }
});

方案二：直接在内容脚本中请求（简化版） #

只要在manifest中配置了目标图片域名的权限，内容脚本可以直接发起无no-cors的fetch请求，绕过CORS限制：

1. 更新manifest.json
   添加权限：

{
  "permissions": ["https://目标图片域名/*"],
  "content_scripts": [
    {
      "matches": ["https://你要处理的网站域名/*"],
      "js": ["your-script.js"]
    }
  ]
}

2. 修改原转换函数
   去掉mode: 'no-cors'：

async function urlToBase64(url) {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`请求失败: ${response.status}`);
    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 base64String = await urlToBase64(thumb);

补充说明 #

你之前尝试的canvas方法失败，是因为即使设置了crossOrigin='Anonymous'，如果服务器未返回CORS头，图片会被标记为“污染”，导致toDataURL()报错。而扩展的权限机制可以完全绕过这个限制，无需依赖服务器配置。

内容的提问来源于stack exchange，提问作者Efraín