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}`);
});
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?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.