React Next.js表单提交报错：Failed to read the request form. Missing content-type boundary

你的错误核心原因是请求格式与Content-Type不匹配，同时手动设置multipart/form-data头却未提供必要的边界信息——浏览器只有在直接发送FormData对象时才会自动生成边界。

问题拆解 #

1. 你用JSON.stringify(formData)把数据转成了JSON字符串，但却设置了Content-Type: multipart/form-data，两种格式完全不兼容
2. 手动指定multipart/form-data时必须附带边界参数（比如multipart/form-data; boundary=----WebKitFormBoundaryXxXxX），你未添加该参数导致后端无法解析请求

解决方案（二选一，根据后端API实际接收格式选择） #

方案1：后端期望JSON格式（application/json） #

如果Swagger显示API接收application/json类型，修改请求头：

const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const response = await fetch("http://192.168.1.73:5077/api/Account", {
        method: "POST",
        body: JSON.stringify(formData),
        headers: {
          "Content-Type": "application/json", // 改为JSON格式的Content-Type
        },
      });

      if (response.ok) {
        console.log("Form data submitted successfully");
        alert("Form data submitted successfully");
        router.push("/login");
      } else {
        const errorMessage = await response.text();
        console.error(`Failed to submit form data: ${errorMessage}`);
        alert(`Failed to submit form data: ${errorMessage}`);
      }
    } catch (error) {
      console.error("Error:", error);
    }
};

方案2：后端期望multipart/form-data格式 #

如果Swagger显示API接收form-data（比如包含文件上传），直接使用FormData对象，不要手动设置Content-Type：

const handleSubmit = async (event) => {
    event.preventDefault();

    // 确保formData是FormData实例，若为手动构建则按下方注释方式处理
    const formData = new FormData(event.target);
    // const formData = new FormData();
    // formData.append("username", username);
    // formData.append("password", password);

    try {
      const response = await fetch("http://192.168.1.73:5077/api/Account", {
        method: "POST",
        body: formData, // 直接传递FormData对象
        // 不要手动设置Content-Type，浏览器会自动添加带边界的请求头
      });

      if (response.ok) {
        console.log("Form data submitted successfully");
        alert("Form data submitted successfully");
        router.push("/login");
      } else {
        const errorMessage = await response.text();
        console.error(`Failed to submit form data: ${errorMessage}`);
        alert(`Failed to submit form data: ${errorMessage}`);
      }
    } catch (error) {
      console.error("Error:", error);
    }
};

关键注意点 #

• ASP.NET Web API中，标记[FromBody]的参数对应JSON格式，标记[FromForm]的对应multipart/form-data格式
• 永远不要手动给multipart/form-data设置Content-Type头，除非你自己生成边界并处理body格式，否则交给浏览器自动处理

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