React项目登录触发404错误，寻求问题排查与解决建议

我开发的Web应用在点击登录按钮后返回Error 404错误，提示请求的资源未找到。已反复检查代码与配置，仍无法定位问题根源，附上相关信息恳请提供排查方向与解决建议：

登录触发404错误的截图说明：显示请求资源未找到的404错误页面

背景说明 #

Web应用支持用户登录功能，当前点击登录按钮后返回404错误，提示请求的资源未找到，自查代码与配置后仍无法定位问题。

代码文件说明 #

• auth.routes.js：定义认证相关路由
• auth.js：封装登录、令牌验证等认证请求函数
• axios.js：配置Axios HTTP客户端对接后端API
• app.js：Express应用入口，配置中间件与路由处理
• App.jsx：React组件，配置应用页面路由（包含登录页）
• auth.controller.js：处理用户认证逻辑，包括凭证验证与令牌生成

额外配置信息 #

• 后端服务地址：http://localhost:4000
• 前端应用地址：http://localhost:5173

代码片段 #

auth.routes.js

import { Router } from 'express'
import { login, logout, profile, verifyToken } from '../controllers/auth.controller.js'
import { authRequired } from '../middlewares/validateToken.js'
import { validateSchema } from '../middlewares/validator.middleware.js'
import { loginSchema } from '../schemas/auth.schema.js'

const router = Router()

router.post('/login', validateSchema(loginSchema), login)
router.post('/logout', logout)
router.get("/profile", authRequired, profile)
router.get("/verify", verifyToken)

export default router

auth.js

import axios from './axios.js';

export const loginRequest = user => {
    return axios.post('/login', user)
        .catch(error => {
            console.error("Error al realizar la solicitud POST:", error);
            throw error; // Propaga el error para que pueda ser manejado en el componente que llama a loginRequest
        });
};

export const verifyTokenRequest = () => axios.get('/api/verify');

axios.js

import axios from 'axios';

axios.create({
    baseURL: 'http://localhost:4000/api',
    withCredentials: true
});

export default axios;

app.js

import express from "express";
import morgan from "morgan";
import cookieParser from "cookie-parser";
import cors from "cors";

import authRoutes from './routes/auth.routes.js'
import auditoriaRoutes from './routes/auditoria.routes.js'

const app = express()

app.use(cors({
    origin: "http://localhost:5173",
    credentials: true
}))
app.use(morgan("dev"))
app.use(express.json())
app.use(cookieParser())

app.use('/api', authRoutes);
app.use('/api', auditoriaRoutes);

export default app

App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './context/AuthContext.jsx';

import LoginPage from './pages/LoginPage';
import AuditoriaPage from './pages/AuditoriaPage';
import ProfilePage from './pages/ProfilePage';

import ProtectedRoute from './ProtectedRoute.jsx';

function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path='/login' element={<LoginPage />} />
          <Route element={<ProtectedRoute />} >
            <Route path='/auditoria' element={<AuditoriaPage />} />
            <Route path='/profile' element={<ProfilePage />} />
          </Route>
        </Routes>
      </BrowserRouter >
    </AuthProvider>
  );
}

export default App;

auth.controller.js

import User from '../models/user.model.js'
import bcrypt from 'bcryptjs'
import { createAccessToken } from '../libs/jwt.js'
import jwt from 'jsonwebtoken'
import { TOKEN_SECRET } from '../config.js'

export const login = async (req, res) => {
    const { email, password } = req.body;

    try {
        console.log("Solicitud de inicio de sesión recibida:", email); // Agregar registro de depuración
        const userFound = await User.findOne({ email });

        if (!userFound) {
            console.log("Usuario no encontrado:", email); // Agregar registro de depuración
            return res.status(400).json({ message: "User not found" });
        }

        const isMatch = await bcrypt.compare(password, userFound.password);
        if (!isMatch) {
            console.log("Contraseña incorrecta para el usuario:", email); // Agregar registro de depuración
            return res.status(400).json({ message: "Incorrect email or password" });
        }

        console.log("Inicio de sesión exitoso para el usuario:", email); // Agregar registro de depuración
        const token = await createAccessToken({ id: userFound._id });
        res.cookie('token', token);
        res.json({
            id: userFound._id,
            username: userFound.username,
            email: userFound.email,
        });
    } catch (error) {
        console.error("Error en la función de inicio de sesión:", error); // Agregar registro de error
        res.status(500).json({ message: 'Internal Server Error' });
    }
}

再次感谢各位的帮助！

内容的提问来源于stack exchange，提问作者Víctor Fernández de Mora