Express.js新增POST路由getroombyid请求返回404错误

你的POST接口返回404是两个配置问题导致的，也刚好能解释为什么/getallrooms接口可以正常运行：

• 相对路径拼接错误：前端axios写的是./api/rooms/getroombyid这种带./的相对路径，/getallrooms是在根路径页面调用的，相对路径会被解析为正确的/api/rooms/getallrooms；但Bookingscreen页面对应的前端路由是/book/:roomid，相对路径会被解析成/book/api/rooms/getroombyid，和后端挂载的路由前缀完全不匹配。
• 端口转发缺失：后端服务默认监听的是5000端口，但报错里的请求是发往3000端口（React前端开发服务器默认端口），如果没有配置代理，就算路径写对了请求也到不了后端服务。

1. 修正前端接口请求路径，去掉路径前的./，统一用根路径开头的写法：

// Bookingscreen 中请求代码修改为
const data = (await axios.post('/api/rooms/getroombyid', {roomid : match.params.roomid})).data

2. 配置前端开发服务代理，把/api开头的请求转发到后端5000端口：
   如果是create-react-app搭建的项目，直接在前端项目根目录的package.json里新增一行配置：

"proxy": "http://localhost:5000"

配置完成后重启前端开发服务即可生效。
3. （可选优化）后端POST接口中已经提取了roomid变量，查询数据库时可以直接复用，不影响功能仅简化代码：

router.post("/getroombyid", async(req, res) => {
    const roomid = req.body.roomid
    try {
         const room = await Room.findOne({'_id' : roomid})
         res.send(room)
    } catch (error) {
         return res.status(400).json({ message: error });
    }
});

修改完成后重启前后端服务，触发请求时控制台显示的请求地址应为http://localhost:3000/api/rooms/getroombyid，代理会自动将请求转发到后端对应路由，即可正常返回数据，不再报404错误。

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