React+Express+MongoDB项目POST请求404错误排查求助

我需要从表单获取username和timeTaken数据，发送到服务器创建User对象并存入MongoDB Atlas，但一直出现POST http://localhost:5173/submit-record 404 (Not Found)错误，试过多种方法仍未解决，求帮助。

技术栈 #

• 前端：React
• 后端：Express + MongoDB
• 为排查问题已新建Express项目

相关代码 #

modal.jsx（表单模态框） #

import React, { useState } from 'react';
import axios from 'axios';
import "../App.css"


function Modal({ time, onClose }) {
  const [username, setUsername] = useState(''); // State to store the username

  const handleSubmit = async () => {
    try {
      const response = await axios.post('/submit-record', {
        username,
        time,
      });
  
      if (response.status === 201) {
        // Handle success (e.g., close the modal)
        onClose();
      }
    } catch (error) {
      console.error('Error submitting record:', error);
    }
  };

  return (
    <div className="modal">
      <div className="modal-content">
      <input className='username-input'
          type="text"
          placeholder="Enter your username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
        <p className="timeTaken">Time Taken: {time} seconds</p>
        <button className="close-Button" onClick={handleSubmit}>
          Submit
        </button>
      </div>
    </div>
  );
}

export default Modal;

app.js（后端代码） #

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const User = require('./models/user.js'); // Import the Mongoose model

const mongoose = require('mongoose');

mongoose.connect('blank for now so i can post here', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'MongoDB connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

var app = express();

const cors = require('cors');

app.use(cors()); // Enable CORS for all routes

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

console.log("TEST");
// Define the route for submitting records directly on the app object
app.post('/submit-record', async (req, res) => {
  const { username, timeTaken } = req.body;
  console.log('Received POST request to /submit-record', req.body);

  try {
    // Create a new user instance and save it to the database
    const user = new User({ username, timeTaken });
    await user.save();

    res.status(201).json({ message: 'Record saved successfully' });
  } catch (error) {
    console.error('Error saving record:', error);
    res.status(500).json({ message: 'Internal server error' });
  }
});

app.listen(5173, () => {
  console.log('Server is running on port 5173');
});


module.exports = app;

已尝试的解决方法 #

• 咨询ChatGPT
• 重启服务器
• 使用POSTMAN测试接口
• 检查路由拼写
• 搭建测试服务器
• 重构后端代码

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