使用React Hook Form的登录表单持续出现500服务器错误求助

核心问题：请求方式与Axios用法错误 #

你当前用axios.get发送登录请求，但GET请求不应该携带请求体，大部分后端服务也不会处理GET请求的body内容，这是导致500错误的关键原因。Postman能正常响应，应该是你在Postman里用的是POST请求。

具体错误点： #

• 错误使用GET请求传递登录数据：登录属于提交敏感信息的操作，规范上应该用POST请求，且后端大概率配置了POST接口接收登录参数。
• Axios GET方法参数错误：axios.get(url, config)的第二个参数是配置对象，不是请求体。你把JSON字符串作为第二个参数传入，导致请求格式完全不符合后端预期。

修正后的代码 #

1. 修改onSubmit函数（改用POST请求，规范Axios用法） #

const onSubmit = async (data) => {
  try {
    console.log(data);
    // 直接传入data，Axios会自动序列化JSON，无需手动JSON.stringify
    const res = await axios.post(URL + `/login`, data, {
      headers: { "Content-Type": "application/json" }
    });
    console.log(res);
    navigate('/');
  } catch (err) {
    // 打印完整错误信息，方便排查
    console.error(err.response?.data || err.message);
  }
};

2. 统一表单输入的name属性（可选，避免混淆） #

把邮箱输入框的name="username"改成name="email"，和React Hook Form的register字段保持一致：

<InputText
  name="email"
  type="text"
  {...register('email')}
  className={`form-control ${errors.email ? 'is-invalid' : ''}`}
/>

额外排查建议 #

• 打开浏览器开发者工具的Network面板，查看实际发送的请求：确认请求方法是POST、请求体格式正确、请求URL无误。
• 检查后端是否有CORS配置问题（虽然Postman正常，但浏览器可能有跨域限制，不过500错误一般是后端内部错误，优先排查请求格式）。

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