当我尝试登录我的 React 项目时出现错误 404

Question

我在尝试登录 Web 应用程序时遇到 404 错误，但无法查明问题所在。我在下面提供了相关的代码片段以供参考：

背景： 我有一个用户可以登录的网络应用程序，但我目前面临登录功能的问题。当我尝试登录时，收到 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 访问。 尽管进行了彻底的调试工作，我仍然无法解决这个问题。任何有关可能导致 404 错误的原因的见解或建议将不胜感激。谢谢您的帮助！

我把你留在我的代码下面。

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

应用程序.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' });
    }
}

Answer 1

解决登录问题：后端和前端配置

1. 验证后端路由配置

首先，确保您的后端登录路由已正确设置且可访问。根据您的 auth.routes.js，登录路由定义如下：

router.post('/login', validateSchema(loginSchema), login);

这意味着您的后端需要对 /login 发出 POST 请求来处理登录逻辑。

2. 检查axios配置

在 axios.js 中，您已将基本 URL 设置为“http://localhost:4000/api”。这意味着使用此 Axios 实例发出的所有请求都将以此 URL 为前缀。但是，在 auth.js 中，当您发出登录请求时，您正在使用：

axios.post('/login', user);

此请求与基本 URL 相关，因此它实际上被发送到“http://localhost:4000/api/login”。

确保您的后端服务器已正确设置以处理此 URL 的请求。如果您的后端服务器在 http://localhost:4000 上运行，并且您已在 /api 下安装了身份验证路由，则请求应该正确路由到您的登录处理程序。

3. 检查前端请求

在您的 auth.js 中，loginRequest 函数已正确设置为向 /login 端点发送 POST 请求。确保您传递给此函数的用户对象包含必要的电子邮件和密码字段，因为这些是您的后端登录处理程序所期望的。

4. CORS 配置

您的后端配置为接受来自 http://localhost:5173 的带有凭据的请求。这对于您的设置来说是正确的，因为您的前端正在该端口上运行。确保您的前端正在使用凭据发出请求。默认情况下，当 withCredentials 选项设置为 true 时，Axios 会发送带有凭据的请求，这已在 axios.js 中完成。

5. 调试

后端日志：在后端登录处理程序中添加更详细的日志记录，以确保它被命中并调试处理程序本身内的任何问题。

网络请求：使用浏览器的开发者工具检查尝试登录时发出的网络请求。检查请求 URL、方法、标头和正文以确保一切符合预期。

错误处理：确保您的前端正确处理后端返回的任何错误。这可以帮助确定问题出在请求还是响应上。