React通过action方法向Express提交表单数据，req.body为空排查

核心原因 #

你的React表单中的<input>元素缺少name属性。原生HTML表单提交时，只有带有name属性的表单控件，其数据才会被包含在请求体中传递给后端。没有name标识的话，表单数据不会被打包，导致Express端接收的req.body为空对象。

解决方案 #

给每个输入框添加与id对应的name属性，修改后的React Login组件代码如下：

import {useState} from "react";

const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  return (
    <>
      <form
        className="login"
        action="http://localhost:3000/login"
        method="POST"
      >
        <h2>Login</h2>
        <label htmlFor="username">Username</label>
        <input
          id="username"
          name="username" {/* 新增name属性 */}
          type="text"
          placeholder="username"
          onChange={(e) => setUsername(e.target.value)}
          value={username}
        />
        <label htmlFor="password">Password</label>
        <input
          type="password"
          placeholder="password"
          onChange={(e) => setPassword(e.target.value)}
          id="password"
          name="password" {/* 新增name属性 */}
          value={password}
        />
        <button>Login</button>
      </form>
    </>
  );
};

export default Login;

验证说明 #

你的Express后端已经正确配置了express.urlencoded({extended: true})中间件，该中间件专门用于解析原生表单提交的application/x-www-form-urlencoded格式数据。补上name属性后，表单提交时会自动把username和password的键值对打包进请求体，此时后端的req.body就能正常获取到提交的数据了。

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