React/Express应用DELETE请求404问题求助

核心问题：路由路径重复匹配 #

你的Express路由配置存在路径重复问题：

• app.js里已经通过app.use("/entries", entryController)给整个entry控制器加上了/entries前缀
• 但entryController.js的DELETE路由又写了entries.delete('/entries/:id', ...)

这导致实际生效的路由是/entries/entries/:id，而前端请求的是/entries/2，自然返回404。

修复步骤 #

1. 修正DELETE路由路径
   修改entryController.js中的DELETE路由，去掉重复的/entries前缀：

   // =====  DELETE  =====
   entries.delete('/:id', async(req, res) => {
       const id = req.params.id;
       const deletedEntry = await deleteEntry(id);
       if (deletedEntry.id) {
           res.status(200).json(deletedEntry);
       } else {
           res.status(404).json( {error: "Entry not found."} );
       }
   });
   

2. 同步检查更新路由
   你提到的“无法单独更新条目”问题，大概率是同样的路由重复问题。检查entryController.js中的PUT路由，确保路径是/:id而非/entries/:id，避免重复前缀。

额外优化建议 #

• 优化数据库错误处理
  当前deleteEntry函数捕获错误后直接返回error对象，会导致控制器里deletedEntry.id的判断失效（error对象没有id属性）。建议修改为返回明确的空值：

  const deleteEntry = async(id) => {
      try {
          const deletedEntry = await db.one(
              "DELETE FROM entries WHERE id = $1 RETURNING *", id
          );
          return deletedEntry;
      } catch(error){
          return null;
      }
  };
  

  同时调整控制器的判断逻辑：

  if (deletedEntry) {
      res.status(200).json(deletedEntry);
  } else {
      res.status(404).json( {error: "Entry not found."} );
  }
  

• 添加路由日志验证
  在entryController.js开头添加全局日志，确认实际匹配的路由：

  entries.use((req, res, next) => {
      console.log(`接收到 ${req.method} 请求，路径：${req.originalUrl}`);
      next();
  });
  

  重启服务后发送请求，查看控制台输出的路径是否符合预期。

内容的提问来源于stack exchange，提问作者Jennifer E.