Express.js，我新添加的路線出現 404（未找到）錯誤

Question

在我的項目中創建第二條路線時遇到了一些問題。 雖然router.get("/getallrooms")工作正常， router.post("/getroombyid")給我404 not found 消息：

POST http://localhost:3000/book/api/rooms/getroombyid 404 (Not Found)

我附上了我的路線代碼，預訂屏幕，我試圖在其中使用這個getroombyid路線和server.js代碼。 我很樂意接受任何建議。

const express = require('express');
const router = express.Router();

const Room = require('../models/room')


router.get("/getallrooms", async(req, res) =>{

    try{
        const rooms = await Room.find({})
        res.send(rooms)
    }
    catch(error){
        return res.status(400).json({message: error});
    }
});

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

module.exports = router

預訂屏幕

import React, {useState, useEffect} from 'react'
import axios from 'axios'

function Bookingscreen({match}) {

  const [loading, setloading] = useState()
  const [error, seterror] = useState()
  const [room, setroom] = useState()

  useEffect(() => {
    try {
        setloading(true)
        async function gettingRoom() {
            const data = (await axios.post('./api/rooms/getroombyid', {roomid : match.params.roomid})).data
            setroom(data)
            setloading(false)
        }
        gettingRoom()
    }
    catch (error) {
        seterror(true)
        console.log(error)
        setloading(false)
    }
  }, [])

  return (
    <div>
        <h1>Bookingscreen</h1>
        <h1>Room id = {match.params.roomid}</h1>
    </div>
  )
}

export default Bookingscreen

服務器.js

const express = require("express");

const app = express();
const dbConfig = require('./db')

const roomsRoute = require('./routes/roomsRoute')
app.use(express.json())
app.use('/api/rooms', roomsRoute)

const port = process.env.PORT || 5000;

app.listen(port, () => {
    console.log(`App listening on port ${port}`)
});

Answer 1

問題是由以下行引起的，特別是./api部分：

const data = (await axios.post('./api/rooms/getroombyid', {roomid : match.params.roomid})).data

您正在做的是考慮您在瀏覽器中的當前網址，我假設它是/book ，因此最終請求是：

http://localhost:3000/book/api/rooms/getroombyid

您的后端不存在哪個。 用這一行更改上面的行：

const data = (await axios.post('/api/rooms/getroombyid', {roomid : match.params.roomid})).data