React, Node axios no funciona pero fetch sí está funcionando.
En mi aplicación MERN, estoy tratando de usar axios como lo hago regularmente, pero cambié un poco mi estructura de archivos y creo que eso está afectando mi capacidad para usar axios (que es más corto y lo prefiero).
El servidor siempre se ejecutaba con nodemon en el puerto 3001.
El cliente siempre se ejecutaba con el comando npm start en el puerto 3000.
Estructura de archivos (A) que ha funcionado con axios en el pasado:
servidor
cliente
//archivos de react aquí
rutas
index.js
server.js
Estructura de archivos (B) que no funciona con axios pero sí con fetch (Obtengo el error GET http://localhost:3000/api/data 404 (No encontrado)):
padre
cliente
//archivos de React aquí
servidor
//archivos de node aquí
Mi código de axios:
const res = await axios.get(‘/api/data’)
Mi código de fetch:
const res = await fetch(‘http://localhost:3001/api/data’)
Dentro de mi aplicación de React, axios funciona perfectamente bien con la Estructura de archivos A, pero produce un error cuando uso axios con la Estructura de archivos B.
Entonces, mis preguntas son:
¿Por qué mi axios no funciona todo el tiempo mientras fetch sí lo hace? (Creo que puede tener algo que ver con axios necesitando estar bajo el servidor como hijo, mientras que fetch puede estar en cualquier lugar, pero siento que eso es incorrecto)
¿Existen cambios que pueda hacer que hagan que axios funcione con la Estructura de archivos B?
davy.ai
Hay algunas razones por las cuales axios puede no estar funcionando con la Estructura de Archivos B:
/api/datay él sabrá dirigirse ahttp://localhost:3001/api/data` porque allí es donde se ejecuta el servidor. Sin embargo, con la Estructura de Archivos B, el servidor se ejecuta en el puerto 3001 pero el cliente se ejecuta en el puerto 3000. Al hacer una solicitud con axios a/api/data, intentará dirigirse ahttp://localhost:3000/api/data` que no existe (de ahí el error “404 No Encontrado”). Es por esto que fetch funciona porque especificas la URL completa con `http://localhost:3001/api/data`.Estructura de archivos: Como mencionaste, axios necesita ser un hijo del servidor para funcionar. En la Estructura de Archivos A, la llamada
axios.get('/api/data')se hace desde un archivo que está dentro del directorio del servidor (directorio del servidor/cliente). En la Estructura de Archivos B, la llamadaaxios.get('/api/data')se hace desde un archivo que está dentro del directorio del cliente (directorio padre/cliente). Esto significa que axios no puede encontrar el directorio del servidor para hacer la solicitud API.Para hacer que axios funcione con la Estructura de Archivos B, puedes hacer algunos cambios:
/api/data, puedes hacer una solicitud a `http://localhost:3001/api/data`. Esto asegurará que la solicitud se envíe al puerto correcto.Mueve la ruta de la API al directorio del servidor: En la Estructura de Archivos B, puedes mover la ruta de la API (
routes/index.js) al directorio del servidor (directorio padre/server/routes/index.js). De esta manera, cuando hagas una solicitud de API con axios desde el directorio del cliente, podrá encontrar el directorio correcto para hacer la solicitud.Una vez que hayas realizado estos cambios, tu código axios debería lucir algo así: