1

Estoy desarrollando una aplicación web con React en el frontend y Express en el backend. Al intentar acceder a una ruta específica en mi servidor Express desde mi aplicación React, recibo un error 404.

Código relevante:

Frontend (app.js)

useEffect(() => {
  fetchUsers();
}, [loggedIn]);

const fetchUsers = async () => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get('http://localhost:3000/api/auth/me', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    setUsers(response.data);
  } catch (error) {
    console.error('Error al obtener usuarios:', error);
    console.error('Error de Axios:', error.response); 
  }
};

Backend (server.js)

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

const app = express();

app.use(cors({ 
  origin: 'localhost:3000', 
  optionsSuccessStatus: 200 
}));

app.use(express.json());

mongoose.connect('mongodb://localhost:27017/miBaseDeDatos', {
  useNewUrlParser: true, 
  useUnifiedTopology: true 
});

app.get('/api/auth/me', (req, res) => {
  res.status(200).json({ message: "Hello from server" });
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Servidor iniciado en el puerto ${PORT}`);
});
6
  • Qué respuesta obtienes con Postman?
    – René
    Commented el 9 abr. a las 23:33
  • me devuelve el código HTML de la página en lugar de los datos esperados, lo que quiere decir que hay un error en la ruta /api/auth/me, pero no se como solucionarlo exactamente.
    – Eduardo
    Commented el 9 abr. a las 23:58
  • Es código 200? Intenta agregando Accept: "application/json" en los headers, por otro lado manda un mensaje simple como respuesta en la petición para ver si pasa, también sería bueno agregar el código de la petición que estás usando, las demás peticiones si funcionan?
    – René
    Commented el 10 abr. a las 0:44
  • He añadido en todos los headers del archivo App.js de mi proyecto, el comando 'Accept': 'application/json', y un "app.get('/api/auth/me', (req, res) => { res.status(200).send("Hello from server"); });" , al server.js (archivo principal de mi proyecto). No obstante, al intentar acceder mediante la url , no me lleva al mensaje de "hello from server".
    – Eduardo
    Commented el 10 abr. a las 2:19
  • No establezcas el estatus como 200, el 200 indica que es una petición exitosa. Comentaba lo de agregar application/json porque puede ser que responda con un status 200 pero siga mandando un HTML y así le indicas que tiene que recibir un json. Agrega el código del server para ver cual es el problema.
    – René
    Commented el 10 abr. a las 9:10

1 respuesta 1

0

Creo que tu error es en la conexión de la base de datos, ya que es una operación asíncrona (async - await), realmente bastaría con agregar await a mongoose.connect, pero para atrapar errores y mejorar la legibilidad del código recomendaría crear un archivo aparte de esta forma:

const mongoose = require("mongoose");

const dbConnection = async () => {
  try {
    await mongoose.connect('mongodb://localhost:27017/miBaseDeDatos', {
      useNewUrlParser: true,

      useUnifiedTopology: true,
    });

    console.log("Base de datos conectada");
  } catch (error) {
    throw new Error("Error en la conexión a la base de datos");
  }
};

module.exports = {
  dbConnection,
};

Y solamente lo llamarías en el index.js como dbConnection();, por cuestiones de seguridad el string de conexión también debería de estar en las variables de entorno.

Agregando, esta linea te puede ocasionar problemas const PORT = process.env.PORT || 3000; ya que según tengo entendido React se ejecuta en el puerto 3000, si quieres usarlos en el mismo puerto tendrías que usar un proxy y hacer otras configuraciones pero eso ya es para otra pregunta.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.