Tengo un proyecto React/Node existente que estoy tratando de configurar en la máquina de otro desarrollador. Cuando ejecutan la aplicación web, las llamadas xhr y fetch realizadas por la aplicación web dan como resultado tiempos de espera, y por mi vida no puedo entender por qué.

Intentamos ejecutar la aplicación en Chrome, modo de incógnito en Chrome, Safari y Firefox, y tenemos el mismo problema en todas partes. Cualquier solicitud a la API en http://localhost:3002/example falla con un tiempo de espera. Tenga en cuenta que estamos usando axios con una configuración de tiempo de espera de 20 segundos (20000 ms).

Sin embargo, si visitamos http://localhost:3002/example directamente en otra pestaña del navegador en cualquier navegador, obtenemos una respuesta API con JSON. Las solicitudes de cartero también tienen éxito.

Por lo que puedo decir, tenemos la configuración de CORS configurada correctamente.

Estamos usando Next.js y Serverless (con serverless-offline localmente).

Reproduje el entorno en mi máquina con un clon nuevo del repositorio, la misma versión exacta de Node y la misma configuración exacta de .env. Todo funciona bien para mí sin tiempos de espera.

Si ejecutamos fetch('http://localhost:3002/example') en su máquina en la consola de Chrome, obtenemos el tiempo de espera. Sin embargo, si ejecutamos fetch('http://127.0.0.1:3002/example') en la consola de Chrome, la solicitud se realiza correctamente sin demora.

Hemos revisado /etc/hosts y vemos una asignación de 127.0.0.1 a localhost:

 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost

Sin embargo, extrañamente, cuando configuramos la configuración de baseURL del cliente axios para usar 127.0.0.1, las solicitudes realizadas desde la aplicación web aún fallan

 client.defaults.baseURL = 'http://localhost:3002'

Estoy completamente perplejo. ¿Alguna idea de lo que está pasando?