I have an existing React/Node project I'm trying to set up on another developer's machine. When they run the web app, xhr and fetch calls made by the web app result in timeouts, and we cannot for the life of me figure out why.

We've tried running the app in Chrome, Incognito mode in Chrome, Safari, and Firefox, and we get the same issue everywhere. Any request to the API at http://localhost:3002/example fails with a timeout. Please note we're using axios with a timeout setting of 20 seconds (20000 ms).

However, if we visit http://localhost:3002/example directly in another browser tab in any browser, we get an API response with JSON. Postman requests also succeed.

As far as I can tell, we have CORS settings all set up correctly.

We're using Next.js and Serverless (with serverless-offline locally).

I've reproduced the environment on my machine with a fresh clone of the repository, the same exact Node version, and the same exact .env settings. Everything works fine for me with no timeouts.

If we run fetch('http://localhost:3002/example') on their machine in the Chrome console, we get the timeout. However, if we run fetch('http://127.0.0.1:3002/example') in the Chrome console, the request succeeds with no delay.

We've checked /etc/hosts, and we see a mapping from 127.0.0.1 to localhost:

127.0.0.1   localhost
255.255.255.255 broadcasthost
::1             localhost

However, strangely, when we set the axios client baseURL setting to use 127.0.0.1, requests made from the web app still fail

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

I'm completely stumped. Any ideas what's happening?