React通过fetch POST向Node传数据时request.body为undefined如何解决

Express v4.16.0及之后的版本已将请求体解析功能内置到框架中，但默认不会主动启用对应解析规则。你当前Node端没有配置JSON格式请求体的解析中间件，无法识别前端发送的application/json类型请求数据，所以request.body输出为undefined。

• 第一步：在Node端路由定义前添加JSON请求体解析中间件
  修改后的完整Node端代码如下：

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

// 新增：解析application/json格式的请求体
application.use(express.json());
// 如果后续需要处理form表单提交的application/x-www-form-urlencoded格式数据，可额外添加下面这行
// application.use(express.urlencoded({ extended: true }));

application.get('/', (request, response) => {
    response.send('Basic route');
});

application.post('/register', (request, response) => {
    console.log(request.body);
    console.log('POST received in Node');
    // 补充：请求处理完成后需要给前端返回响应，否则前端fetch会一直处于pending状态
    response.status(200).json({ status: 'success' });
});

application.listen(8080, () => {
    console.log('Connected on PORT 8080');
});

• 第二步：可选修正React端fetch的语法问题
  你当前代码中fetch的then回调写法存在错误，console.log会在请求发起时立即执行，而非请求完成后执行，修正后写法如下：

const postData = async () => {
    await fetch('/register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            username,
            password,
        }),
    }).then(() => console.log('POST made from component'));
};

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