使用React和Fetch API向FastAPI传表单数据时遇422错误

问题分析 #

你遇到的422错误核心原因是：FastAPI的Form()依赖要求请求必须携带application/x-www-form-urlencoded类型的表单数据，且字段名严格匹配username和password。虽然你用了URLSearchParams构造数据，但Fetch可能没有自动设置正确的请求头，导致后端无法识别表单字段。

修复方案 #

1. 显式设置请求头 #

修改你的Fetch请求，添加Content-Type头，确保后端能正确解析表单数据：

const handleLogin = async (e) => {
  e.preventDefault();
  
  const formData = new URLSearchParams();
  formData.append('username', email);
  formData.append('password', password);

  try {
    const response = await fetch('http://localhost:8000/token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded', // 关键：显式指定内容类型
      },
      body: formData,
    });

    if (!response.ok) {
      // 新增错误详情打印，方便调试
      const errorDetail = await response.json();
      console.error('登录错误详情:', errorDetail);
      throw new Error('Login failed');
    }
    // 后续登录成功逻辑
  } catch (err) {
    console.error(err);
  }
};

2. 检查前端输入框绑定 #

确保输入框正确绑定状态变量，否则email或password可能为空值：

<form onSubmit={handleLogin}>
  <input
    type="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    placeholder="邮箱"
    required
  />
  <input
    type="password"
    value={password}
    onChange={(e) => setPassword(e.target.value)}
    placeholder="密码"
    required
  />
  <button type="submit">登录</button>
</form>

3. 验证后端接口可用性 #

先用curl或Postman测试后端接口，排除后端本身的问题：

curl -X POST "http://localhost:8000/token" \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "username=test_user&password=test_pass"

如果该请求能正常返回token，说明后端无问题，问题集中在前端请求构造环节。

额外说明 #

• FastAPI的Form()参数仅支持解析application/x-www-form-urlencoded或multipart/form-data类型请求，不能解析JSON格式数据，请勿用JSON.stringify()发送表单。
• 纯文本表单用URLSearchParams更高效，若需上传文件可改用FormData对象。

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