React+Express项目客户端axios.get()无法获取点赞数据如何解决

1. HTTP规范不推荐GET请求携带请求体，axios发起GET请求时传入的data参数不会被浏览器发送到服务端
2. Express内置的express.json()请求体解析中间件默认不处理GET请求的请求体，导致服务端req.body.postId、req.body.reactionType均为undefined，MongoDB查询条件匹配不到对应数据，返回空数组
3. POSTMAN测试正常是因为其支持自定义GET请求携带请求体且会主动发送，与浏览器、axios的默认行为不一致，因此出现两边结果不同的情况

将参数放在URL查询字段中传递，修改两处代码即可：

1. 修改客户端Like.jsx请求逻辑 #

把GET请求的data参数替换为params参数，axios会自动将参数拼接为URL查询字符串：

// 原代码
const likeRes = await axios.get(`/reactions/all`, {
    data: {
        postId, 
        reactionType: LIKE
    }
})

// 修改后代码
const likeRes = await axios.get(`/reactions/all`, {
    params: {
        postId, 
        reactionType: LIKE
    }
})

2. 修改服务端likes.js接口逻辑 #

从req.query中读取查询参数，而非req.body：

// 原代码
const reactions = await Reaction.find({
    postId: req.body.postId,
    reactionType: req.body.reactionType,
})

// 修改后代码
const reactions = await Reaction.find({
    postId: req.query.postId,
    reactionType: req.query.reactionType,
})

如果确实需要通过请求体传递参数，可以将获取数据的接口改为POST类型：

1. 服务端把router.get("/all", async (req, res) => {修改为router.post("/all", async (req, res) => {
2. 客户端把axios.get修改为axios.post即可

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