React提交登录表单到Node.js服务端req.body为空问题

数据老陈

2026-8-29

问题根因

你的代码存在3个直接导致服务端收不到有效数据的错误：

状态同步逻辑错误：你写的useEffect依赖数组为空，仅会在组件首次渲染时执行一次。首次渲染时UserName和PassWord的初始值是null，后续用户输入更新这两个状态时，FormData不会同步更新，提交时拿到的永远是初始的空值对象。
请求模式配置错误：fetch中设置mode: 'no-cors'时，浏览器会强制忽略自定义的Content-Type: application/json请求头，实际发出的请求头会被改成text/plain等简单类型。如果你的Node.js服务端用了express.json()这类仅解析JSON格式请求体的中间件，就不会对传入的内容做解析，最终req.body只会剩下空的原型对象。另外这个模式下返回的响应是不透明的，你根本读不到服务端的实际返回内容。
表单提交顺序问题：onSubmit回调里你先执行提交逻辑再调用e.preventDefault()，极端场景下会触发表单默认的GET提交行为，打断自定义的POST请求。

修复步骤

删除冗余的FormData状态和对应的无效useEffect，提交时直接读取最新的UserName、PassWord值组装请求体即可，不需要额外存一份状态做中转。两个输入状态的初始值从null改成空字符串，避免提交时出现null值。
删除mode: 'no-cors'配置，跨域问题需要在Node.js服务端配置CORS中间件解决，前端用no-cors模式绕开跨域限制的做法完全无法满足JSON接口的交互需求。
调整表单提交回调的执行顺序，先调用e.preventDefault()阻止默认提交行为，再执行自定义的请求逻辑。
补全fetch的响应解析逻辑，之前的代码直接返回response对象，无法拿到接口返回的实际业务数据。

修复后的核心代码片段：

// 状态部分只保留两个输入值的状态即可
const [UserName, setUsername] = useState("");
const [PassWord, setPassWord] = useState("");

const submitFormSignIn = () => {
    const testURL = "http://localhost:3100/login";
    const myInit = {
        method: "POST",
        body: JSON.stringify({ UserName, PassWord }),
        headers: {
            'Content-Type': 'application/json'
        },
    };
    fetch(testURL, myInit)
        .then(res => res.json())
        .then(resData => console.log("接口返回结果：", resData))
        .catch(err => console.log("请求异常：", err));
}

// 表单提交事件调整顺序
<form onSubmit={(e) => { 
    e.preventDefault(); 
    submitFormSignIn(); 
}}>
    {/* 其余表单元素保持原有代码不变 */}
</form>

服务端跨域配置参考：如果调整后控制台报跨域错误，在Node.js服务端安装cors依赖并注册中间件即可：
const express = require('express');
const cors = require('cors');
const app = express();

// 注意中间件要注册在业务路由之前
app.use(cors());
app.use(express.json());

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