React Native开发MERN应用遇Axios500及PayloadTooLargeError错误

DevOps 小满

2026-9-3

问题根因

你遇到的两个报错是因果关系：后端抛出的PayloadTooLargeError: request entity too large是核心错误，前端收到的AxiosError: Request failed with status code 500是该后端错误的透传结果，问题和React Native端FormData拼接逻辑无关，全部出在服务端请求体体积限制配置上。

修复步骤

按以下顺序排查修改，覆盖所有常见踩坑点：

调整Express原生请求体解析的体积上限，配置必须写在所有路由注册逻辑之前
大部分开发者只会修改express.json()的限制，遗漏express.urlencoded()的配置，直接替换server.js里对应的中间件代码：
```
// 放在app实例创建后、所有路由注册前
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ limit: '50mb', extended: true }));
```
上限值可根据实际业务调整，单张手机拍摄原图普遍在3-10MB，50mb足够覆盖9张以内的多图上传场景。
给文件上传中间件multer单独配置体积限制
这是最高发的踩坑点：multer默认单文件大小上限仅1MB，仅修改Express原生配置不会覆盖multer的默认规则。找到你项目里multer的初始化代码，添加limits配置：
```
const upload = multer({
  // 不管你用内存存储还是本地磁盘存储，都要加limits配置
  storage: 替换为你项目里已写的存储逻辑,
  limits: {
    fileSize: 50 * 1024 * 1024, // 单文件最大50MB，单位为字节
    fieldSize: 50 * 1024 * 1024 // 普通表单字段的最大体积
  }
});
```
注意路由上挂载的multer中间件，接收文件的字段名必须和RN端FormData append图片时用的字段名完全一致，大小写敏感。
部署环境额外检查反向代理配置
如果本地调试正常，部署到服务器后才报错，是Nginx等反向代理默认的1MB请求体上限拦截了请求，在Nginx配置的对应server块中添加：
```
client_max_body_size 50m;
```
修改完成后重启Nginx服务生效。
移除前端Axios中手动配置的Content-Type请求头
React Native环境下发起FormData请求时，会自动生成带正确boundary标识的multipart/form-data请求头，如果你手动写死了这个请求头，会导致boundary缺失，服务端解析失败时也可能抛出体积相关错误，直接删除该自定义头配置，Axios会自动识别请求类型设置正确头。

验证技巧：修改完配置后先传100KB以内的极小图片测试，如果提交成功，再逐步替换为更大的图片测试，即可确认限制配置是否生效。

内容的提问来源于stack exchange，提问作者Saad Chaudry

React Native开发MERN应用遇Axios500及PayloadTooLargeError错误

修复步骤 #

修复步骤