axios如何为GET请求附带payload？后端req.body为空排查

• HTTP 语义层面，GET 请求原生不支持通过请求体（request body）传参，大部分Node框架的body解析中间件、网关代理默认也不会解析、转发GET请求携带的body内容，所以不管前端怎么给GET请求塞body，后端的req.body大概率都是空对象。
• 前端axios调用姿势错误：很多开发者容易混淆axios.get和axios.post的参数结构——post方法的第二个参数是请求体数据，但axios.get(url, config)的第二个参数是全局请求配置项，不是直接的入参对象。原代码里直接把sender、receiver写在配置对象顶层，这些字段根本不会被自动当成请求参数发送。

1. 调整前端传参逻辑 #

GET请求的参数需要写到配置对象的params字段中，axios会自动把这个对象序列化拼接到URL的查询字符串（query string）后面，代码修改如下：

useEffect(() => {
  const fetchMessages = async () => {
    const { data } = await axios.get('/api/messages', {
      // 将待传递的参数放到params字段下，axios会自动序列化拼接
      params: {
        sender: '5ffadc2710d93b21a812c33b',
        receiver: '5ffadc1510d93b21a812c339',
      }
    });
    setMessages(data.messages);
    console.log(data);
  };
  fetchMessages();
}, []);

修改后实际发送的请求URL会自动拼成：/api/messages?sender=5ffadc2710d93b21a812c33b&receiver=5ffadc1510d93b21a812c339

2. 调整后端取值逻辑 #

因为参数是通过URL查询字符串传递的，不再是请求体内容，后端需要从req.query中解构参数，而不是从req.body获取，代码修改如下：

Router.route('/').get(
  asyncHandler(async (req, res) => {
    // 从req.query中获取URL传递的查询参数
    const { sender, receiver } = req.query;
    console.log(req.query);
    const user = await User.findOne({ _id: sender });
    const user2 = await User.findOne({ _id: receiver });
    let sentMessages = await Message.find({ sender, receiver });
    let receivedMessages = await Message.find({
      sender: receiver,
      receiver: sender,
    });
    let messages = sentMessages.concat(receivedMessages);
    messages.sort((a, b) => a.time.getTime() - b.time.getTime());
    res.status(200).json({
      sender: user,
      receiver: user2,
      messages,
    });
  })
);

• 不要给GET请求强行塞请求体传参：这种方式不符合HTTP标准语义，很容易被浏览器、CDN、反向代理在传输过程中丢弃，导致参数丢失。
• 如果后续需要传递更复杂的嵌套结构参数，可以通过axios内置的paramsSerializer配置项自动序列化对象，不需要手动拼接URL。

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