本文首发在我的个人博客:你写的 Express 接口 404,可能是被“动态路由”吃掉了
前情提要
最近参与公司的一个项目前端 React,后端用的 Express。目前我就做一些功能的新增或者修改。
对于 Express ,本人没有公司项目实战经验,个人经验也仅限于刚开始搭建个人第一版博客时使用过。
所以对于 Express ,属于使用过,但还没入门。
遇到问题
项目中有如下代码,我新增了 uploadGroupMemberCSV
和 exportToCSV
两个方法
const router = require('express').Router()
...
const uploadGroupMemberCSV = async (req,res) => {};
const exportToCSV = async (req, res) => {}
...router.get("/group-member",[requireRoles(), checkRoles("admin", "owner", "moderator")],getAllGroupsMembers
);
router.get("/group-member/:id",[requireRoles(), checkRoles("admin", "owner", "moderator")],getSingleGroupMember
);
router.put("/group-member/:id",[requireRoles(), checkRoles("admin", "owner", "moderator")],updateGroupMember
);
router.delete("/group-member/delete/:id",[requireRoles(), checkRoles("admin", "owner")],deleteGroupMember
);router.post("/group-member/upload-csv",[requireRoles(), checkRoles("admin", "owner", "moderator"),upload.single('file'), ],uploadGroupMemberCSV
);
router.get("/group-member/exportToCSV",[requireRoles(), checkRoles("admin", "owner", "moderator")],exportToCSV
);
module.exports = router;
当我在前端调用 /group-member/exportToCSV
接口时,会报 404
的错误。
看到 404 ,开始以为接口名字写错了,排查了半天都没发现问题。
结果查看接口返回,居然有错误信息返回? 拿着错误信息在后端代码中去查找,发现错误信息是 updateGroupMember
、deleteGroupMember
、getSingleGroupMember
这三个接口中某一个返回的错误信息(其他接口没做查询不到数据就抛出异常,所以可能直接跳过了)
奇怪,我没有调这几个接口,怎么就返回他们的错误信息了呢?难道和代码写的顺序有关?
尝试调整代码位置后就正常了。。。
// 调整后的代码
const router = require('express').Router()
...
const uploadGroupMemberCSV = async (req,res) => {};
const exportToCSV = async (req, res) => {}
...router.get("/group-member",[requireRoles(), checkRoles("admin", "owner", "moderator")],getAllGroupsMembers
);
router.post("/group-member/upload-csv",[requireRoles(), checkRoles("admin", "owner", "moderator"),upload.single('file'), ],uploadGroupMemberCSV
);// ===> 顺序调整到前面来了router.get("/group-member/exportToCSV",[requireRoles(), checkRoles("admin", "owner", "moderator")],exportToCSV
);
router.get("/group-member/:id",[requireRoles(), checkRoles("admin", "owner", "moderator")],getSingleGroupMember
);
router.put("/group-member/:id",[requireRoles(), checkRoles("admin", "owner", "moderator")],updateGroupMember
);
router.delete("/group-member/delete/:id",[requireRoles(), checkRoles("admin", "owner")],deleteGroupMember
);module.exports = router;
最后
问了下 ChatGPT,好像 JAVA 等传统语言也存在路由优先级的问题?
所以我开始遇到的问题就是写在前面的 get 方法的 /group-member/:id
吞掉了我写在后面同样是 get 方法的 /group-member/exportToCSV
接口。
建议:
- 静态路由写在前面,动态路由写在后面
作为初次写后端的前端,还有许多坑需要踩的。
感谢你的阅读