React使用image-to-base64转图片为base64时报Failed to fetch错误

你的代码实现存在两个核心问题，同时触发了逻辑错误和浏览器安全限制报错：

1. 异步逻辑处理错误：image-to-base64的浏览器端实现是基于fetch的异步函数，你当前的写法在调用内部convertImage后没有等待异步请求完成，就直接返回了初始值为空的imageB64，属于典型的异步竞态问题，哪怕请求成功也拿不到正确的返回值。
2. 跨域请求被拦截：你在runkit环境测试正常是因为runkit运行在Node.js环境，没有浏览器同源策略限制；浏览器端直接请求第三方图片地址时，如果目标图片服务器没有配置允许你当前站点访问的CORS响应头，浏览器会直接拦截请求，抛出TypeError: Failed to fetch错误。

1. 修正异步函数写法 #

不要用嵌套异步函数+同步返回的错误写法，直接将函数改为返回Promise的标准异步函数：

const imageUrlToBase64 = async (imgURL: string): Promise<string> => {
  try {
    return await imageToBase64(imgURL);
  } catch (error) {
    console.log(`拉取图片失败，地址：${imgURL}`);
    console.error(error);
    // 可按业务需求返回默认占位图base64，或抛出错误由上层处理
    return "";
  }
};

2. 调整调用逻辑 #

异步函数不能在React渲染流程中直接同步调用取值，需要在副作用中拉取结果，存入状态后再参与渲染：

// React组件内示例
import { useState, useEffect } from 'react';

const [imageBase64List, setImageBase64List] = useState<string[]>([]);

useEffect(() => {
  // imgUrls为你需要转换的所有图片地址数组
  const fetchAllImages = async () => {
    const results = await Promise.all(
      imgUrls.map(url => imageUrlToBase64(url))
    );
    setImageBase64List(results);
  };

  fetchAllImages();
}, [imgUrls]);

// 等所有图片base64加载完成后，再渲染PDF相关内容，避免渲染过程中发起异步请求

3. 解决跨域问题 #

跨域是浏览器端的强制安全限制，纯前端无法绕过，选择任意一种可行方案即可：

• 将图片资源迁移到同域名服务下，或存储到配置了正确CORS规则的云对象存储中（允许你的站点域名作为请求来源，开放GET请求权限）
• 搭建后端代理接口：前端请求自有服务端接口，由服务端拉取目标图片、转换为base64后返回给前端，服务端发起请求不受跨域规则限制
• 本地开发临时调试可通过关闭浏览器安全启动参数、使用本地代理插件绕过跨域，但该方式无法用于生产环境。

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