Axios搭配Express无法获取请求体，前端传参后端接收为空

核心问题是GET请求的参数传递方式错误：

• 前端axios的GET请求中，第二个参数是配置对象，你直接传{user:name}会被当作配置项，但并未将数据放入URL查询参数中；
• 后端试图从request.body获取数据，但GET请求通常不携带请求体（多数服务器也不会解析GET请求的body），因此无法拿到值。

方案1：使用GET请求的URL查询参数（推荐） #

前端代码修改 #

将用户信息放到params字段中，axios会自动拼接为URL查询参数：

const user = useSelector(selectUser)
function getWatchLater(name){
  axios.get('http://localhost:5000/watchlater', {
    params: { user: name } // 把参数放入params
  })
  .then((response)=>{
    setWatchLater(response.data)
  })
}

后端代码修改 #

从request.query中获取查询参数：

const mysql = require('mysql2')
const express = require('express')
const cors = require('cors');

const app = express()
app.use(cors());
app.use(express.json())

app.get("/watchlater", (request, response)=>{
    const user = request.query.user; // 从query中获取参数
    console.log(user); // 现在可以正常拿到用户名
    // 后续执行数据库查询逻辑
});

方案2：改用POST请求（适合数据量较大或敏感场景） #

如果业务场景更适合用POST传递数据，可修改请求方式：

前端代码修改 #

const user = useSelector(selectUser)
function getWatchLater(name){
  axios.post('http://localhost:5000/watchlater', { user: name }) // 改用POST，数据放入请求体
  .then((response)=>{
    setWatchLater(response.data)
  })
}

后端代码修改 #

将路由改为POST，依然从request.body获取数据：

const mysql = require('mysql2')
const express = require('express')
const cors = require('cors');

const app = express()
app.use(cors());
app.use(express.json())

app.post("/watchlater", (request, response)=>{ // 路由改为POST
    const user = request.body.user;
    console.log(user);
    // 后续执行数据库查询逻辑
});

• GET请求的设计规范就是通过URL查询参数传递数据，符合RESTful风格；
• 若坚持用GET传递请求体，部分服务器需额外配置解析，但这种做法不符合HTTP规范，存在兼容性风险，不推荐使用。

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