如何从Axios请求获取参数？React+Express项目遇取值异常

1. 匹配请求方式与参数传递位置 #

场景1：使用GET请求 #

GET请求参数需放在URL查询字符串中，前端Axios写法：

const walletAddress = "0x123..."; // 已验证的钱包地址
axios.get('/api/user-items', {
  params: { address: walletAddress }
})
.then(res => console.log(res.data))
.catch(err => console.error(err));

后端Express通过req.query.address获取参数：

app.get('/api/user-items', (req, res) => {
  const address = req.query.address;
  console.log(address); // 此时应能拿到正确值
  // 后续数据库查询逻辑
});

场景2：使用POST请求 #

POST请求参数放在请求体中，必须先在Express入口文件配置JSON解析中间件：

// app.js 或 server.js 中添加
app.use(express.json()); // 解析JSON格式的请求体

前端Axios传参写法：

const walletAddress = "0x123...";
axios.post('/api/user-items', { address: walletAddress })
.then(res => console.log(res.data))
.catch(err => console.error(err));

后端通过req.body.address获取参数：

app.post('/api/user-items', (req, res) => {
  const address = req.body.address;
  console.log(address);
  // 数据库操作逻辑
});

2. 检查路由匹配一致性 #

确保前端请求的URL与后端定义的路由完全一致，比如是否遗漏/api前缀、拼写错误等。

3. 排查参数格式问题 #

• 前端传递前用walletAddress.trim()去除地址可能带的空格、换行符；
• GET请求中0x开头的十六进制地址会被自动编码，Express的req.query会自动解码，无需额外处理。

4. 调试方法 #

• 前端发送请求前，再次用console.log(walletAddress)确认值正确；
• 后端打印完整的请求参数对象，定位问题：

// GET请求调试
app.get('/api/user-items', (req, res) => {
  console.log('完整query对象:', req.query);
  const address = req.query.address;
  // ...
});

// POST请求调试
app.post('/api/user-items', (req, res) => {
  console.log('完整body对象:', req.body);
  const address = req.body.address;
  // ...
});

内容的提问来源于stack exchange，提问作者Koen vd zwan