MERN栈中Axios POST请求未向后端传递refreshToken问题

核心原因 #

后端Express应用未配置JSON请求体解析中间件，导致无法读取前端发送的JSON格式数据，进而req.body为空对象。

解决方案 #

1. 给Express添加请求体解析中间件

在你的Express入口文件（比如app.js或server.js）中，在注册路由之前添加express.json()中间件：

const express = require('express');
const app = express();

// 关键：解析JSON格式的请求体，必须放在路由注册前
app.use(express.json());

// 之后再注册你的API路由
app.use('/v1/users', require('./routes/userRoutes'));

app.listen(5000, () => console.log('Server running on port 5000'));

2. 确认前端请求格式正确（可选，Axios默认已处理）

Axios默认会将请求体序列化为JSON并设置Content-Type: application/json，但如果需要手动确认，可以显式指定headers：

const refresh = () => {
  // 先确认refreshToken变量有值
  console.log('待发送的refreshToken:', refreshToken);
  
  axios.post("/v1/users/refresh-token", { refreshToken }, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then((response) => {
    setAuth((prev) => ({ ...prev, accessToken: response.data.data.accessToken }));
    return response.data.data.accessToken;
  })
  .catch((error) => console.error(error));
};

return refresh;

3. 若使用Fetch发送请求的正确写法

Fetch不会自动序列化JSON或设置Content-Type，需要手动处理：

const refresh = () => {
  fetch("/v1/users/refresh-token", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ refreshToken }),
  })
  .then(res => res.json())
  .then(data => {
    setAuth(prev => ({ ...prev, accessToken: data.data.accessToken }));
  })
  .catch(err => console.error(err));
};

验证 #

添加中间件后，重启后端服务，再次发送请求，后端控制台的console.log(req.body)应该能打印出包含refreshToken的对象。

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