React对接Node.js：注册表单提交后字段全为Undefined问题排查

你的代码里有两个核心问题导致所有字段变成undefined，下面逐一说明并给出修复方案：

1. 前端请求的Content-Type头部错误 #

在fetch请求的headers配置中，你错误地写了'Content-type': 'application.json'，正确的MIME类型应该是application/json（注意斜杠和首字母大写的Type）。这个错误会让后端的body-parser无法正确识别并解析请求体的JSON数据，最终导致req.body所有字段为undefined。

修复后的前端fetch代码：

fetch('http://localhost:8000/users_api', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json' // 修正Content-Type格式
    },
    body: JSON.stringify(state)
})
.then(res => res.json())
.then(data => console.log('返回数据:', data)) // 新增日志查看返回结果
.catch(err => console.error('请求错误:', err)) // 捕获请求异常

2. 后端CORS配置未允许POST方法 #

你的CORS中间件只允许了GET方法：res.setHeader('Access-Control-Allow-Methods', 'GET');，但注册请求是POST类型，浏览器会先发送OPTIONS预检请求，这个配置会导致预检失败，虽然你说用户能创建，但实际上请求可能没有被正确处理，属于浏览器异常兼容情况。

修复后的后端CORS配置：

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); // 添加POST方法
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type'); // 修正Header名称
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

额外优化点 #

• 后端代码中res.setHeader('users', users)这行无效，HTTP响应头无法直接传递数组对象，建议删除这行，你的res.send({users: users})已经正确返回了用户数据。
• 前端submit函数中使用的usernameError、emailError等变量未定义，会导致条件判断出错，需要补充这些错误状态的定义（比如用useState声明），否则可能会意外阻止请求发送。

修复以上两个核心问题后，后端就能正确解析前端发送的JSON数据，req.body中的字段会正常取值，返回给前端的用户数据也不会再是undefined。

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