使用fetch发送请求时req.body为空，Postman可正常传输的问题排查

核心原因 #

前端请求里设置了mode: 'no-cors'，这个模式下浏览器会强制限制请求行为：

• 无法正常发送Content-Type: application/json请求头，实际发送的是text/plain
• 后端的express.json()中间件仅解析Content-Type为application/json的请求体，因此无法识别请求数据，导致req.body为空

解决方案步骤 #

1. 移除前端fetch的mode: 'no-cors' #

修改前端fetch配置，去掉mode: 'no-cors'，默认的cors模式会按照标准跨域规则处理请求：

const changeHandler = (event) => {
  Papa.parse(event.target.files[0], {
    header: true,
    skipEmptyLines: true,
    complete: function (results) {
      results.data.forEach(entry => {
        // 构造数据对象
        let data = {};
        let keys = ['Date', 'Description', 'Debit Amount'];
        for (let key in entry) {
          if (keys.includes(key)) {
            data[key.toLowerCase().replaceAll(' ', '_')] = entry[key];
          }
        }
        // 发送数据到服务端
        fetch('http://localhost:3001/api/create_transactions', {
          method: 'POST',
          // 移除mode: 'no-cors'
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data),
        }).then(function (response) {
          console.log(response);
        })
      });
    },
  });

  // 重置文件输入框
  event.target.value = null;
};

2. 后端配置CORS中间件（必要） #

由于前后端属于跨域场景（前端端口与后端3001不同），需要在express后端安装并配置cors中间件，否则浏览器会拦截跨域请求：

首先安装依赖：

npm install cors

然后修改后端代码：

const express = require('express');
const cors = require('cors'); // 引入cors
const crypto = require('crypto');
const app = express();
const PORT = 3001;

app.use(cors()); // 启用CORS
app.use(express.json());

app.post("/api/create_transactions", (req, res) => {
  console.log(req.body); // 现在能正常获取数据
  let hash = crypto.createHash('md5').update(req.body['date'] + req.body['description'] + req.body['debit_amount']).digest('hex');

  let data = [
    hash,
    req.body['date'],
    req.body['description'],
    req.body['debit_amount'],
  ];

  db.query('insert into transactions (`hash`, `date`, `description`, `debit_amount`) values (?, ?, ?, ?)', data, (err, result, fields) => {
    if (err) {
      console.log(err);
      res.status(500).json({"status": 500, "error": err.message, "response": null});
    } else {
      console.log(result);
      res.json({"status": 200, "error": null, "response": result})
    }
  });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

额外说明 #

• Postman能正常工作是因为它不受浏览器跨域规则限制，no-cors的约束对其无效
• 可以在前端fetch前添加console.log(data)，验证构造的数据对象是否正确

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