Node.js执行创建操作时出现404错误，求助问题排查

我之前实现的React课程管理相关页面（含课程列表页与添加课程表单页）几周前还能正常运行，但现在执行创建课程操作时出现404错误，不清楚问题出在哪里，相关代码如下：

课程列表页代码 #

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import CourseList from '../components/CourseList';

function CoursesPage({ setCourse }) {
    // 用于页面跳转
    const redirect = useNavigate();
    // 存储课程列表数据
    const [courses, setCourses] = useState([]);

    // 获取全部课程列表
    const loadCourses = async () => {
        const response = await fetch('/MongoCourses');
        const courses = await response.json();
        setCourses(courses);
    }

    // 编辑单个课程
    const onEditCourses = async course => {
        setCourse(course);
        redirect("/update");
    }

    // 删除单个课程
    const onDeleteCourse = async _id => {
        const response = await fetch(`/MongoCourses/${_id}`, { method: 'DELETE' });
        if (response.status === 204) {
            const getResponse = await fetch('/MongoCourses');
            const courses = await getResponse.json();
            setCourses(courses);
        } else {
            console.error(`无法删除课程，ID = ${_id}，状态码 = ${response.status}`)
        }
    }

    // 页面加载时获取课程列表
    useEffect(() => {
        loadCourses();
    }, []);

    // 渲染课程列表
    return (
        <>
            <h2>课程列表</h2>
            <p>这是我为计算机科学学位修读的课程持续更新列表。</p>
            <CourseList 
                courses={courses}
                onEdit={onEditCourses} 
                onDelete={onDeleteCourse} 
            />
        </>
    );
}

export default CoursesPage;

添加课程表单页代码 #

import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";

// 根据你的主题和数据结构修改图标、函数名及参数

export const AddCoursePageForm = () => {
    const [courseNumber, setNumber]     = useState('');
    const [courseName, setName]         = useState('');
    const [description, setDescription] = useState('');
    const [courseDate, setDate]         = useState('');
    
    const redirect = useNavigate();

    const addCourse = async () => {
        const newCourse = {courseNumber, courseName, description, courseDate };
        const response = await fetch('/MongoCourses', {
            method: 'post',
            body: JSON.stringify(newCourse),
            headers: {
                'Content-Type': 'application/json',
            },
        });
        if(response.status === 201){
            alert(`成功添加课程：${courseName}`);
            redirect("/coursesPage");
        } else {
            alert(`无法添加课程，请检查所有字段是否填写正确。错误状态码 = ${response.status}`);
            redirect("/coursesPage");
        }
    };

    return (
        <>
        <article>
            <h2>添加课程</h2>
            <p>关于此页面的说明段落。</p>
            <form onSubmit={(e) => { e.preventDefault();}}>
                <fieldset>
                    <legend>你要添加什么课程？</legend>
                    <label for="courseNumber">课程编号</label>
                    <input
                        type="text"
                        placeholder="CS 101"
                        value={courseNumber}
                        onChange={e => setNumber(e.target.value)} 
                        id="courseNumber" 
                        required/>
                    
                    <label for="courseName">课程名称</label>
                    <input
                        type="text"
                        value={courseName}
                        placeholder="计算机科学导论"
                        onChange={e => setName(e.target.value)} 
                        id="courseName" 
                        required/>

                    <label for="description">课程描述</label>
                    <textarea 
                        type="text"
                        placeholder="课程描述（最多500字符）"
                        value={description}
                        onChange={e => setDescription(e.target.value)} 
                        id="description" 
                        maxlength="500" 
                    ></textarea>

                    <label for="courseDate">完成日期</label>
                    <input
                        type="date"
                        placeholder="完成日期"
                        value={courseDate}
                        onChange={e => setDate(e.target.value)} 
                        id="courseDate" />
                    
                    <label for="submit">
                    <button
                        type="submit"
                        onClick={addCourse}
                        id="submit"
                    >添加</button></label>
                </fieldset>
            </form>
        </article>
        </>
    );
}

export default AddCoursePageForm;

排查方向 #

• 确认后端服务状态：404代表请求的接口路径不存在，首先检查后端服务器是否正常启动，有没有最近停止或重启后配置错误
• 核对请求路径与后端路由：检查后端是否存在POST /MongoCourses的路由配置，是否最近修改过后端代码导致路由被删除、路径变更
• 检查请求方法大小写：代码中用的是method: 'post'，部分后端框架对HTTP方法大小写敏感，建议改为规范的大写'POST'后重试
• 查看完整请求地址：打开浏览器开发者工具（F12）的Network标签，找到添加课程的请求，查看完整URL是否指向正确的后端服务（比如是否有代理配置变更、域名/端口修改）
• 验证表单数据格式：确认发送的JSON字段是否与后端接收要求一致，比如字段名拼写是否正确
• 排查跨域配置：虽然404不是典型跨域错误，但如果前端与后端域名/端口不同，可确认后端是否正确配置了CORS，避免因跨域拦截导致的间接问题

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