React中Axios发送GET请求后端req.body为空对象问题排查

• HTTP GET 请求的语义是资源查询，规范层面未定义请求体（body）的传输标准，绝大多数HTTP客户端、Web服务框架默认都不会解析GET请求携带的请求体内容。
• Axios 的请求配置逻辑中，只有 POST/PUT/PATCH 这类设计为携带请求体的请求方法，才会将data字段的内容序列化后写入请求体发送；GET 请求下配置的data字段不会被实际发送到后端，这就是后端接口能命中，但req.body始终为空对象的核心原因。
• 你当前的后端控制器代码还存在逻辑缺失：即使成功接收到参数，也没有向前端返回响应，请求会一直处于挂起状态直到超时。

二选一即可，优先推荐第一种，符合RESTful接口设计规范。

方案1：改用URL查询参数传递用户标识（推荐） #

前端调整Axios配置，移除GET请求的data字段，将需要传递的用户参数放到params字段下，Axios会自动将参数拼接为URL查询字符串发送：

function getUser(data) {
  console.log(data)
  axios({
      url: `http://localhost:3000/profiles`,
      method: "GET",
      // 仅传递查询需要的用户唯一标识即可，不需要传整个user对象
      params: {
        userId: data._id,
        username: data.username
      }
  })
    .then((response) => {
      console.log(response)
      // 这里写你拿到数据后渲染页面的逻辑，比如把返回的profile数据存入state
    })
}

// useEffect依赖数组记得补上用到的状态值，避免闭包问题
useEffect(() => {
    setProfileList(profiles)
    getUser(user.user)
},[profiles, user.user]);

后端调整参数取值逻辑，从req.query中获取前端传递的查询参数，同时补全响应返回逻辑：

async function getUser(req,res){
  console.log('getUser hit')
  // 从查询参数对象中取对应字段
  const { userId, username } = req.query
  console.log('接收到的用户参数：', userId, username)
  // 这里执行你的数据库查询逻辑
  // 查完数据记得返回响应给前端
  res.status(200).json({
    code: 0,
    data: {/* 数据库查询到的profile数据 */}
  })
}

方案2：改用POST方法传递请求体（不推荐，不符合GET请求语义） #

如果确实需要通过请求体传递复杂参数，直接把前端Axios的请求方法改为POST即可：

axios({
    url: `http://localhost:3000/profiles`,
    method: "POST",
    data: data
})

后端同步将对应路由的请求方法改为POST，同时确认服务已经配置了JSON格式请求体的解析中间件（比如Express服务需要提前添加app.use(express.json())配置），就可以正常从req.body中拿到传递的参数了。

注意：如果选择方案2，必须提前配置请求体解析中间件，否则即使是POST请求，req.body依然会是空值。

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