Next.js客户端向服务端传参调用/api/ipfs接口报错排查

• 客户端fetch配置错误：POST请求传递请求体的标准字段为小写的body，代码中错写为大写DATA，且未设置Content-Type: application/json请求头，Next.js无法自动解析JSON格式请求体，最终服务端req.body为空值。
• 服务端参数传递错误：代码直接将req.body作为axios.get的请求URL传入，因req.body为空，axios发起GET请求的URL为空字符串，触发底层Cannot read properties of null (reading 'replace')报错。
• 异常分支无响应返回：axios请求报错时仅在控制台打印错误，未向客户端返回错误响应，触发Next.js的API resolved without sending a response警告，会导致客户端请求挂起。
• 返回字段不匹配：客户端代码读取返回值的result字段，但服务端成功响应返回的是metadata字段，接口正常运行后也无法拿到预期返回值。

客户端修正代码 #

const response = await fetch("/api/ipfs", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  // 请求体必须序列化为JSON字符串，使用正确的body字段
  body: JSON.stringify({ value: "holaaaa" })
});
if (!response.ok) {
  throw new Error(`Error: ${response.status}`);
}
const result = await response.json()
// 匹配服务端返回的metadata字段
console.log(result.metadata)

服务端API路由修正代码 #

import axios from 'axios';

async function uploadIPFS(req, res) {
  try {
    // 从解析后的请求体中读取客户端传递的参数，根据实际业务调整字段名
    const targetUrl = req.body.value;
    const { data: metadata } = await axios.get(targetUrl);
    res.status(200).json({ metadata });
  } catch (err) {
    console.error(err);
    // 错误场景必须返回响应，避免请求 stalled
    res.status(500).json({ error: "IPFS request failed" });
  }
}

export default function handler(req, res) {
  if (req.method === 'POST') {
    uploadIPFS(req, res);
    return;
  }
  // 非POST请求返回405状态码
  res.setHeader('Allow', ['POST']);
  res.status(405).end(`Method ${req.method} Not Allowed`);
}

注意：如果客户端传递的"holaaaa"不是要请求的目标URL，而是其他业务参数，只需要调整axios.get的传入逻辑，从req.body中取出对应参数拼接即可。

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