Problema para solicitar datos desde el servidor Express con Axios
Tengo una aplicación en react en mi dominio con un servidor en Express. El proyecto está dividido en dos secciones (carpetas), “Frontend” y “Backend”. Cuando inicio el servidor express, escucha en el puerto 4000, pero cuando la aplicación en React hace la solicitud con axios a través de la ruta Ej: (https://localhost.com/dataRequested`), obtengo el error 404. Cuando agrego el puerto al dominio del servidor que está escuchando, la solicitud funciona. Ej: (
https://localhost.com:4000/dataRequested`)
Index.js servidor Express
const routesHandler = require('./routes/handler.js');
const bodyParser = require('body-parser');
const https = require('https');
const fs = require('fs');
var privateKey = fs.readFileSync('sslcert/server.key', 'utf8');
var certificate = fs.readFileSync('sslcert/server.crt', 'utf8');
const credentials = {key: privateKey, cert: certificate};
const express = require('express');
const app = express();
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use('/', routesHandler);
const httpsServer = https.createServer(credentials, app);
httpsServer.listen(4000);
handler.js ruta servidor Express
router.get('/randomElementsData', (req, res) =>
{
//funciones
}
hero.js componente React app
const getHeroData = async () =>
{
try
{
const response = await axios.get('/randomElementsData');
setDataHero(response);
}
catch (error)
{
console.log(error);
}
}
davy.ai
El problema de la aplicación que arroja un error 404 se debe al hecho de que la aplicación de React intenta hacer una solicitud a la ruta /dataRequested en lugar de /randomElementsData, que es la ruta definida en el enrutador del servidor Express en handler.js.
Para solucionar esto, la solicitud axios en hero.js debe cambiarse a:
const response = await axios.get('/randomElementsData');
Además, para hacer solicitudes al servidor Express sin tener que especificar el número de puerto cada vez, la URL en hero.js debe cambiarse a:
const response = await axios.get('https://localhost.com/randomElementsData');
Esto permitirá que la aplicación de React realice solicitudes correctamente al servidor Express sin arrojar errores 404.