Vue 2.6.1中Fetch发送POST请求时Body为Null的问题排查

架构老林

2026-5-7

解决Fetch POST请求Body为Null的问题

我来帮你排查这个头疼的问题！你遇到的情况其实挺常见的——Postman能正常调用后端接口，但自己用Fetch写的POST请求却让后端拿到Null的Body，大概率是请求头或者数据序列化的细节没处理到位，咱们一步步来：

最可能的原因：缺少`Content-Type`请求头

Postman在发送JSON格式的请求时，会自动帮你加上Content-Type: application/json这个请求头，告诉后端“我发的是JSON数据”，但Fetch默认不会添加这个头！后端接收到请求后，因为不知道Body的格式，就没法正确解析，自然就得到Null了。

你只需要在requestOptions的headers里补上这个头就行，修改后的代码如下：

function GetBulkOperationData(tbData) {
  const requestOptions = {
    method: 'POST',
    headers: {
      ...authHeader(), // 保留你的认证头
      'Content-Type': 'application/json' // 新增这个关键头
    },
    body: JSON.stringify({ tbData })
  };
  return fetch(`${config.apiUrl}/a/b`, requestOptions)
    .then(handleResponse)
    .then(bulkOperationData => {
      return bulkOperationData;
    });
}

其他需要排查的点

如果加了Content-Type还是不行，咱们再检查这几个地方：

检查authHeader()的返回值：确保它没有覆盖或者移除了Content-Type头，比如可以在代码里console.log(authHeader())看看返回的headers对象里有没有冲突的设置。
确认JSON序列化的正确性：虽然你给出的JSON看起来没问题，但可以在调用fetch前打印console.log(JSON.stringify({ tbData }))，看看有没有因为tbData里包含undefined字段导致序列化异常（不过你的示例数据是正常的，这个可以作为备选排查项）。
后端接收逻辑的二次确认：既然Postman能正常工作，这个可能性很低，但如果前面的都试过了，可以确认后端是不是明确要求接收raw格式的JSON，而不是form-data或x-www-form-urlencoded（不过Postman能行的话这个应该没问题）。