Next.js中用Axios提交表单遇Bad Request错误，传统提交正常却跳转

问题核心是默认表单提交用的是application/x-www-form-urlencoded格式，而Axios默认发送的是application/json格式，后端接口大概率只支持表单编码的请求，所以触发了错误请求。下面是两种可行的解决方法：

方法一：用URLSearchParams构造表单编码数据 #

手动把表单字段包装成URLSearchParams对象，并设置对应的请求头：

<Form
  onSubmit={(e) => {
    e.preventDefault();
    const formData = new URLSearchParams();
    formData.append('name', e.currentTarget.userName.value);
    formData.append('email', e.currentTarget.userEmail.value);
    formData.append('password', e.currentTarget.usePass.value);

    axios({
      method: "POST",
      url: "/api/user",
      data: formData,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then((res) => {
      prompt("Success", JSON.stringify(res.data));
    }).catch(err => {
      console.error('请求失败:', err);
    });
  }}
>

方法二：用FormData直接获取表单数据 #

这种方式更简洁，直接基于表单元素生成FormData对象，无需手动拼接字段：

<Form
  onSubmit={(e) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);

    axios({
      method: "POST",
      url: "/api/user",
      data: formData
    }).then((res) => {
      prompt("Success", JSON.stringify(res.data));
    }).catch(err => {
      console.error('请求失败:', err);
    });
  }}
>

额外检查点 #

• 确认表单字段名和后端接口接收的参数名完全一致，比如代码里的usePass是否对应后端的password字段，字段名不匹配也会触发Bad Request。

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