无法从Pinata（IPFS）获取数据，LoadNFTs函数报错'failed to fetch'

遇到这种NFT元数据加载失败的情况确实挺头疼的，我帮你梳理下可能的问题根源和对应的解决方案：

问题1：元数据上传方式错误（最可能的原因） #

你在mintProfile函数里用FormData来上传JSON元数据，但Pinata的pinJSONToIPFS接口根本不需要FormData——直接传递JSON内容就行。这种错误的上传方式会导致元数据没有正确存储到IPFS，后续fetch自然拿不到有效数据。

修改后的mintProfile代码：

const mintProfile = async (event) => {
  if (!avatar || !username) return;
  try {
    // 直接构造元数据JSON，抛弃FormData
    const metadata = JSON.stringify({ avatar, username });
    const resFile = await axios({
      method: 'post',
      url: 'https://api.pinata.cloud/pinning/pinJSONToIPFS',
      data: metadata,
      headers: {
        'pinata_api_key': REACT_APP_PINATA_API_KEY,
        'pinata_secret_api_key': REACT_APP_PINATA_API_SECRET,
        'Content-Type': 'application/json',
      },
    });

    setLoading(true);
    const uri = `ipfs://${resFile.data.IpfsHash}`;
    await (await contract.mint(uri)).wait();
    loadMyNFTs();
  } catch (error) {
    console.log('Pinata IPFS URI upload error: ', error);
    window.alert('There was an error minting your NFT. Please try again later.');
  } finally {
    setLoading(false); // 不管成功失败都要关闭loading状态
  }
};

问题2：IPFS协议无法被浏览器直接识别 #

你生成的URI是ipfs://xxx格式，浏览器默认不支持这个协议，必须转换成HTTP网关地址才能正常fetch。推荐用Pinata官方的网关，稳定性更好。

修改后的loadMyNFTs代码：

const loadMyNFTs = async () => {
  try {
    const results = await contract.getMyNfts();
    
    let nfts = await Promise.all(results.map(async i => {
      const uri = await contract.tokenURI(i);
      // 把ipfs协议替换为Pinata HTTP网关地址
      const httpUri = uri.replace('ipfs://', 'https://gateway.pinata.cloud/ipfs/');
      const response = await fetch(httpUri);
      
      if (!response.ok) {
        throw new Error(`元数据加载失败: ${response.statusText}`);
      }
      
      const metadata = await response.json();
      // 头像地址同样要替换成HTTP格式
      return ({
        id: i,
        username: metadata.username,
        avatar: metadata.avatar.replace('ipfs://', 'https://gateway.pinata.cloud/ipfs/')
      });
    }));
    
    setNfts(nfts);
    getProfile(nfts);
  } catch (error) {
    console.error('加载NFT失败: ', error);
    window.alert('加载你的NFT时出错了，请查看控制台获取详细信息。');
    // 这里可以添加错误状态提示，替代一直显示loading
  }
};

额外调试建议 #

1. 手动在浏览器打开转换后的HTTP网关地址，确认元数据是否能正常访问；
2. 去Pinata后台检查你上传的JSON元数据是否存在，内容是否正确；
3. 确认合约的mint交易已成功上链，tokenURI字段存储的地址格式正确。

备注：内容来源于stack exchange，提问作者krish