本文首發在我的個人博客：你寫的 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 接口。

建議：

• 靜態路由寫在前面，動態路由寫在后面

作為初次寫后端的前端，還有許多坑需要踩的。

感謝你的閱讀