使用Fetch向API提交数据时接收值为null的问题排查与优化

你遇到的问题核心很明确：请求头声明的Content-Type和实际发送的请求体格式不匹配，导致后端API无法正确解析你提交的数据，所以返回的字段都是null。

具体问题点 #

你设置了headers: {'Content-Type':'application/x-www-form-urlencoded'}，这告诉后端“我发的是表单格式的数据”，但实际body却是用JSON.stringify()生成的JSON字符串——两种格式完全不兼容，后端自然解析不出有效数据。

两种可行的修复方案 #

根据你的API实际期望的格式，选其中一种即可：

方案1：如果API期望接收表单格式（application/x-www-form-urlencoded）

需要把JSON对象转换成key=value&key2=value2的表单格式，推荐用浏览器原生的URLSearchParams来处理，不用手动拼接字符串：

document.getElementById('reportForm').addEventListener('submit', postData);

function postData(event){
  event.preventDefault();
  let name = document.getElementById('name').value;
  let phone = document.getElementById('phone').value;
  let email = document.getElementById('email').value;
  
  // 用URLSearchParams生成标准的表单格式数据
  let reqBody = new URLSearchParams({
    name: name,
    phone: phone,
    email: email
  });

  console.log("working");
  fetch('http://localhost:8888/api/report', {
    method: "POST",
    headers: {'Content-Type':'application/x-www-form-urlencoded'},
    body: reqBody // 直接传递实例，浏览器会自动处理编码
  })
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err)=>console.log(err))
}

方案2：如果API期望接收JSON格式（更推荐前后端分离场景）

只需要把请求头的Content-Type改成application/json，保持body的JSON字符串即可：

document.getElementById('reportForm').addEventListener('submit', postData);

function postData(event){
  event.preventDefault();
  let name = document.getElementById('name').value;
  let phone = document.getElementById('phone').value;
  let email = document.getElementById('email').value;
  
  let reqBody = {
    name: name,
    phone: phone,
    email: email
  };

  console.log("working");
  fetch('http://localhost:8888/api/report', {
    method: "POST",
    headers: {'Content-Type':'application/json'}, // 修正Content-Type
    body: JSON.stringify(reqBody)
  })
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err)=>console.log(err))
}

几个优化建议 #

1. 简化表单数据获取：不用手动逐个获取输入框的值，用FormData可以一键获取所有表单字段，后续表单新增字段也不用修改代码：

function postData(event){
  event.preventDefault();
  const form = event.target;
  const formData = new FormData(form);
  
  // 转成JSON对象（对应方案2）
  const reqBody = Object.fromEntries(formData);
  // 或者转成表单格式（对应方案1）
  // const reqBody = new URLSearchParams(formData);
  
  // 后续fetch逻辑同上
}

2. 完善错误处理：fetch只有在网络完全失败时才会触发catch，HTTP状态码4xx/5xx的错误不会自动进入catch，建议手动判断：

.then((res) => {
  if (!res.ok) {
    throw new Error(`请求失败！状态码：${res.status}`);
  }
  return res.json();
})

3. 前端输入验证：提交前检查输入的合法性（比如邮箱格式、手机号位数），避免无效请求发送到后端，提升用户体验。

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