使用Next.js上传图片至Pinata IPFS时持续出现400错误求助

问题根源排查 #

你的代码里存在几个关键错误，直接导致了400请求失败：

• Authorization拼写错误：代码中写的是Beared，正确格式应为Bearer，拼写错误会导致鉴权失败。
• 重复鉴权方式冲突：Pinata只需要一种鉴权方式（JWT 或 API密钥对），同时混用两种会触发接口校验错误。
• 手动设置Content-Type冗余：axios发送FormData时会自动生成包含正确boundary的Content-Type，手动设置反而会导致格式不匹配。
• 函数无返回值：当前函数内部的then返回了IpfsHash，但外层没有return整个Promise链，调用函数无法获取结果。
• 未定义变量：代码中的key和secret未声明，需替换为对应的环境变量。

修正后的代码 #

import axios from 'axios';

export const pinFileToIPFS = async (file, pinataMetaData) => {
  const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;

  const data = new FormData();
  console.log("in pinata js");
  console.log(file.name, pinataMetaData);

  // 保留原文件后缀，无需强制添加.jpg
  data.append("file", file);
  data.append("pinataMetadata", JSON.stringify(pinataMetaData));

  try {
    const response = await axios.post(url, data, {
      maxBodyLength: Infinity, // 无需加引号，使用数值类型
      headers: {
        // 选择一种鉴权方式即可，二选一
        Authorization: `Bearer ${process.env.PINATA_JWT}`,
        // 或者使用API密钥对（注释掉上面的JWT）
        // pinata_api_key: process.env.PINATA_API_KEY,
        // pinata_secret_api_key: process.env.PINATA_SECRET_API_KEY,
      },
    });
    return response.data.IpfsHash;
  } catch (error) {
    // 打印详细错误信息，方便排查
    console.error("Pinata上传错误:", error.response?.data || error.message);
    throw error; // 抛出错误供调用方处理
  }
};

额外排查点 #

• 确认环境变量加载：Next.js中客户端组件使用的环境变量需以NEXT_PUBLIC_开头，服务端组件直接使用process.env，确保变量值无拼写错误。
• 核实文件大小：确认上传文件未超出Pinata账户的文件大小限制。
• 检查网络环境：排查是否有代理、防火墙拦截请求，导致请求格式异常。

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