使用Formik结合getform.io发送POST请求时出现400错误求助

核心问题 #

你遇到的400错误是因为请求格式不符合getform.io的要求：直接将Formik的values对象作为fetch的body参数时，浏览器无法正确序列化这个对象，导致getform.io无法解析请求内容。

修复方案 #

方案1：发送JSON格式数据（推荐） #

需要将values序列化为JSON字符串，并添加正确的请求头：

const formik = useFormik({
  initialValues: { firstName:"", email:"", type:"", comment:"" },
  onSubmit: (values) => {
    fetch("https://getform.io/f/...", {
      method: "POST",
      body: JSON.stringify(values), // 序列化对象为JSON字符串
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json" // 声明发送的是JSON格式
      },
    })
    .then(response => {
      console.log(response);
      // 可在此处理成功/失败逻辑
      if (response.ok) {
        alert("提交成功！");
        formik.resetForm(); // 重置表单
      } else {
        alert("提交失败，请重试");
      }
    })
    .catch(error => console.error(error))
    console.log('form data', values)
  }
});

方案2：发送FormData格式数据 #

如果getform.io偏好表单格式数据，可以用FormData对象包装values：

const formik = useFormik({
  initialValues: { firstName:"", email:"", type:"", comment:"" },
  onSubmit: (values) => {
    const formData = new FormData();
    // 将values的键值对添加到FormData
    Object.entries(values).forEach(([key, value]) => {
      formData.append(key, value);
    });

    fetch("https://getform.io/f/...", {
      method: "POST",
      body: formData, // 直接传FormData，浏览器会自动设置正确的Content-Type
      headers: {
        "Accept": "application/json",
      },
    })
    .then(response => {
      console.log(response);
      if (response.ok) {
        alert("提交成功！");
        formik.resetForm();
      } else {
        alert("提交失败，请重试");
      }
    })
    .catch(error => console.error(error))
    console.log('form data', values)
  }
});

额外检查点 #

• 确认你的getform.io表单端点URL（https://getform.io/f/...）完全正确，没有遗漏或写错后缀
• 检查getform.io后台是否设置了必填字段，如果type字段被设为必填，而你提交了空值，也可能导致400错误，可以先给type设置默认值或者在表单里添加必填校验

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