React使用Fetch API提交注册表单返回422 (Unprocessable Entity)错误求助

以下是导致422错误的核心原因及修复方案：

• URL路径错误：你当前的请求URL拼接写了两个连续斜杠${baseURL}//api/v1/auth/，如果你的baseURL末尾已经自带斜杠，最终会生成含三个斜杠的错误路径，部分服务端严格匹配路由时会直接拒绝请求。
• 手动设置了浏览器自动处理的请求头：你把Postman自动填充的头直接复制到了代码里，其中Content-Length、Host属于浏览器自动计算的字段，你手动填写的<calculated when request is sent>是无效字符串，会直接导致服务端无法解析请求；另外手动把User-Agent设置为Postman标识也可能被服务端的安全策略拦截。
• 缺失必要的校验参数：如果后端框架默认开启了CSRF校验（如Rails、Django等），Postman请求会自动携带当前环境的CSRF令牌，但你的Fetch请求没有添加对应头，也会触发参数校验失败。
• 入参不符合要求：建议先打印data变量，确认字段值、格式和你在Postman中提交的参数完全一致，避免出现邮箱格式错误、密码长度不够、两次密码不一致等前端校验遗漏的问题。

修复后的参考代码 #

const handleSubmit = async (event) => {
  event.preventDefault();
  // 先打印确认参数和Postman一致
  const data = {
    email: email, 
    password: password, 
    password_confirmation: password_confirmation
  };
  console.log('提交参数：', data);

  try {
    const resp = await fetch(`${baseURL}/api/v1/auth/`, {
      method:'POST',
      headers: {
        "Content-Type": "application/json",
        "Accept": "*/*"
        // 如果服务端需要CSRF令牌，在这里补充对应头，比如：
        // "X-CSRFToken": yourCsrfToken
      },
      body: JSON.stringify(data),
    });
    // 先判断请求是否成功再处理返回
    if (!resp.ok) {
      const errData = await resp.json();
      // 打印服务端返回的错误详情，能直接定位参数问题
      console.error('请求错误详情：', errData);
      return;
    }
    const result = await resp.json();
    console.log('注册成功：', result);
    alert('表单提交成功');
  } catch (err) {
    console.error('请求异常：', err);
  }
}

排查小贴士：打开浏览器控制台的「网络」标签，找到对应请求，把请求头、请求体和Postman的请求内容逐行对比，差异点就是问题所在。

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