React发送Multipart Form Data至Node.js遇CORS及500错误求助

1. 修复后端语法错误（500错误的直接诱因） #

你的createPost函数中，验证错误分支的代码存在缩进语法问题，导致Node.js抛出未捕获的语法错误，直接返回500状态码。修正缩进并整理代码：

exports.createPost = (req, res, next) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    const error = new Error('Validation failed, entered data is incorrect.');
    // 调试代码保持缩进统一，若无需调试可直接删除
    const title = req.body.title;
    const content = req.body.content;
    console.log(title);
    console.log(content);
    error.statusCode = 422;
    throw error;
  }
  // 后续逻辑保持不变...
};

2. 修正CORS配置（解决跨域头缺失问题） #

当前CORS配置使用*作为允许源，但你的请求携带了Authorization头，根据CORS规范，这种场景下不能使用通配符，必须指定具体前端源，同时添加凭据允许配置：

app.use((req, res, next) => {
  // 替换为前端具体地址，而非通配符
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader(
    "Access-Control-Allow-Methods",
    "OPTIONS, GET, POST, PUT, PATCH, DELETE"
  );
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
  // 允许携带认证头
  res.setHeader("Access-Control-Allow-Credentials", "true");
  // 直接响应OPTIONS预检请求，无需进入路由处理
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

3. 检查multer配置有效性 #

确保fileStorage和fileFilter已正确定义，同时确认项目根目录下images文件夹存在（multer需要写入该目录）：

const fileStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'images');
  },
  filename: (req, file, cb) => {
    cb(null, new Date().toISOString() + '-' + file.originalname);
  }
});

const fileFilter = (req, file, cb) => {
  if (
    file.mimetype === 'image/png' ||
    file.mimetype === 'image/jpg' ||
    file.mimetype === 'image/jpeg'
  ) {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

4. 前端请求注意事项 #

你当前使用FormData发送请求的方式是正确的，不要手动设置Content-Type，fetch会自动生成带正确边界的multipart/form-data请求头，手动设置会导致后端无法解析请求体。

验证流程 #

1. 重启Node.js服务器，确保语法错误已修复
2. 重新发送请求，检查500错误是否消失
3. 查看浏览器控制台，确认CORS错误是否解决

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