Next.js API路由无法传递Base64数据URL问题求助

问题现象 #

• 传递空数组、字符串、数字等数据时，API能正常接收请求；但传递带Base64图片URL的数组时，API完全收不到请求，无任何错误提示，客户端控制台却能正常打印出正确数据。
• 测试过与Base64长度相同甚至更长的随机字符串，请求能正常工作。

前端代码 #

const saveUpdatedImages = async () => {
    try {
      console.log(updatedImages)
      var res = await fetch("/api/admin/dashboard/saveImages", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(updatedImages)
      })
      var result = await res.json();
      if (result.success) {
        window.location.reload();
      } else {
        alert("could not save, try again or talk to Marcus")
      }
    } catch (error) {
      console.log(error)
    }
  }

控制台输出的请求数据 #

[
    {
        "imgUrl": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAABSHORETENED_FOR_READABILITY_t6//Z",
        "_id": "6348c8139336a9e1fb127965"
    }
]

排查方向与解决办法 #

1. 检查服务器端的请求体大小限制 #

这是最常见的原因：Base64编码后的图片体积远大于普通字符串，很多后端框架默认的请求体大小限制（比如Express默认100kb）会直接截断或拒绝接收请求，且不会返回任何响应。

• Express框架：在配置express.json()时手动设置大小限制：

  app.use(express.json({ limit: '10mb' })); // 根据图片实际大小调整，比如10mb、20mb
  

• Next.js API路由：在next.config.js中添加请求大小限制配置：

  module.exports = {
    serverRuntimeConfig: {
      serverBodySizeLimit: '10mb'
    }
  }
  

2. 排查网络中间层的大小限制 #

如果前端和后端之间有Nginx、CDN等中间层，它们也可能设置了请求体大小上限：

• Nginx：修改nginx.conf或对应站点配置中的client_max_body_size：

  client_max_body_size 10m;
  

• CDN：查看对应平台的请求大小限制设置（如Cloudflare、阿里云CDN），调整到合适的值。

3. 完善前端的错误捕获逻辑 #

当前Fetch代码仅捕获网络错误，服务器返回的HTTP错误状态码（如413请求过大）不会进入catch块。修改代码增加状态检查：

const saveUpdatedImages = async () => {
    try {
      console.log(updatedImages)
      var res = await fetch("/api/admin/dashboard/saveImages", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(updatedImages)
      })
      // 新增：检查HTTP状态是否正常
      if (!res.ok) {
          throw new Error(`请求失败，状态码：${res.status}`);
      }
      var result = await res.json();
      if (result.success) {
        window.location.reload();
      } else {
        alert("保存失败，请重试或联系Marcus")
      }
    } catch (error) {
      console.error("请求错误：", error)
    }
  }

这样如果服务器返回413等错误，你能在控制台看到具体信息，进一步确认问题。

4. 验证Base64字符串的合法性 #

虽然测试过不同图片，仍可尝试将Base64字符串单独提取出来解码，排除特殊字符导致的JSON解析失败（概率较低，但可排查）。

内容的提问来源于stack exchange，提问作者Mak G Hill