es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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);
   }
}
Tags:  , ,

Answer

  1. Avatar for 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.

Comments are closed.