Fetch请求体为空问题：前端POST数据后端接收不到

前端代码修正 #

你当前的fetch写法有误，第三个参数不是回调函数，正确的响应处理方式应该用.then()链式调用或async/await：

fetch(location.href, {
  method: "POST",
  headers: {
    "Content-type": "application/json"
  },
  body: JSON.stringify({
    user: document.getElementById("user").innerText,
    call: "Upvote",
    cname: "comp_name"
  })
})
.then(response => response.json()) // 解析响应为JSON格式
.then(data => {
  console.log(data)
})
.catch(err => console.error(err)) // 捕获请求过程中的错误

后端核心问题解决 #

后端req.body为空的关键原因是未配置解析JSON请求体的中间件。如果使用Express框架，需要在定义路由前添加以下代码：

// 需放在router.post('/'...)之前
app.use(express.json());

同时你的后端路由代码存在语法错误，缺少闭合括号，修正后：

router.post("/",(req,res) =>{
    console.log(req.body)
})

验证步骤 #

1. 修正前端fetch的响应逻辑，确保Content-Type: application/json请求头正确设置
2. 后端添加JSON解析中间件
3. 重启服务后重新测试，此时req.body即可正确获取前端发送的JSON数据

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