通过POST请求从客户端向服务器发送大文件时同时触发PayloadTooLargeError与CORS错误的问题排查

我之前也碰到过几乎一模一样的问题——小文件上传顺风顺水，一到大文件就同时触发后端的PayloadTooLargeError和前端的CORS报错。其实这俩问题通常是连锁反应：后端先因为请求体积超限抛出错误，导致CORS响应头没来得及正确返回，前端就收到了跨域错误。咱们一步步来解决：

第一步：彻底解决Node端的PayloadTooLargeError #

这个是根源问题，得先把后端的请求体积限制放开。这里以最常用的Express框架为例：

1. 调整Express内置解析器的限制 #

如果你用的是Express自带的express.json()或express.urlencoded()，一定要明确设置limit参数：

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

// 放开JSON和表单数据的体积限制，这里设为50MB（可根据需求调整）
app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ extended: true, limit: '50mb' }));

2. 若用Multer处理文件上传 #

如果是用Multer接收文件，单独设置Multer的limits也很关键：

const multer = require('multer');
// 设置单文件最大50MB，总请求体积最大50MB
const upload = multer({ 
  limits: { 
    fileSize: 50 * 1024 * 1024, // 50MB
    fieldSize: 50 * 1024 * 1024 
  } 
});

// 在路由中使用该中间件
app.post('/upload', upload.single('file'), (req, res) => {
  // 编写文件处理逻辑
});

3. 别漏了反向代理的限制！ #

如果你的Node服务前面挂了Nginx之类的反向代理，一定要修改Nginx的client_max_body_size参数，不然Nginx会先把大请求拦下来：

server {
  # 其他配置...
  client_max_body_size 50M; # 和你设置的文件大小限制保持一致
}

修改后记得重启Nginx生效。

第二步：修复连锁的CORS错误 #

当后端抛出PayloadTooLargeError时，默认的错误处理可能不会返回CORS头，导致前端触发跨域报错。你需要做这两件事：

1. 确保CORS中间件优先加载 #

把cors()中间件放在所有路由和解析中间件之前：

const cors = require('cors');
// 先加载CORS中间件，指定允许的前端域名
app.use(cors({ origin: 'http://localhost:3000' })); 

// 再加载其他中间件
app.use(express.json({ limit: '50mb' }));
// ...其他路由和中间件

2. 自定义错误处理中间件 #

专门捕获PayloadTooLargeError，并添加CORS头后返回错误响应：

const { PayloadTooLargeError } = require('express');

app.use((err, req, res, next) => {
  if (err instanceof PayloadTooLargeError) {
    // 手动补全CORS头（如果全局CORS未生效的话）
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.status(413).json({ 
      message: '文件体积过大，请上传小于50MB的文件' 
    });
  } else {
    next(err);
  }
});

第三步：前端Axios的优化设置 #

前端这边也需要做一些调整，避免大文件上传时的额外问题：

• 不要手动设置Content-Type: multipart/form-data，让浏览器自动生成，否则可能导致边界符错误；
• 适当延长Axios的超时时间，避免大文件上传中途超时：

  axios.post('/upload', formData, {
    timeout: 60000, // 设置60秒超时
    headers: {
      // 此处无需手动添加Content-Type
    }
  });
  

进阶方案：分块上传 #

如果你的业务经常需要上传超大文件（比如超过100MB），单次上传其实不太可靠，建议用分块上传：

• 前端把文件切成多个小块（比如每块1MB），依次上传到后端；
• 后端接收每一块后暂时存储，等所有块都上传完成后再合并成完整文件；
• 这样不仅能避免请求体积超限的问题，还能支持断点续传，提升用户体验。

内容的提问来源于stack exchange，提问作者Saksham Arya