React向Node.js传数组遇PayloadTooLargeError请求实体过大问题

问题根源 #

这个错误是因为Node.js后端默认限制了请求体的大小，当你传递的record数组体积超过默认阈值时，就会触发该报错。

分步解决方案 #

1. 调整Node.js后端的请求体大小限制 #

如果你使用Express框架，需要修改内置的body解析配置，放宽请求体大小限制：

const express = require('express');
const app = express();

// 配置JSON和URL编码的请求体限制，大小可根据实际需求调整（比如50mb）
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ extended: true, limit: '50mb' }));

app.post("/books", (req, res) => {
  // 注意：前端直接传递的是record数组，所以req.body就是该数组，并非req.body.record
  const values = [req.body];
  // 后续业务逻辑...
  res.status(200).send('数据接收成功');
});

2. 优化前端数据累积逻辑 #

你的React代码中，setRecord([ ...record, column ])会持续将每次上传的列数据追加到record数组中，容易导致数组体积过大。如果不需要保留历史上传数据，可改为直接覆盖：

// 替换原有的setRecord([ ...record, column ])
setRecord(column);

若确实需要累积数据，请确保后端配置的大小限制足够容纳所有累积内容。

额外注意事项 #

• 限制大小需匹配业务场景，避免设置过大造成服务器资源浪费；
• 若使用了文件上传中间件（如multer），需同步调整对应组件的大小限制。

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