2

I created a react app on my MacBook and I access it with http://localhost:3000. Additionally I run an nodejs express mysql server on http://localhost:5000. When I open the IP address with port 3000 in the browser of my Windows 10 laptop in the same network (http://192.166.15.85:3000) I see my app, but the console throws an network error for my backend, because it can not access http://localhost:5000. I hard coded the axios.get() in the frontend to call http://localhost:5000, what is fine for my MacBook. But for the Windows 10 laptop I'd need the ip address instead. How can I handle this?

The error is:

GET http://localhost:5000/get_users net::ERR_CONNECTION_REFUSED
Error: Network Error
   at: createError(createError.js:16)
   at: XMLHttpRequest.handleError (xhr.js:91)
T. Karter
  • 638
  • 7
  • 25
  • Could you post the error you get? I assume it's link to [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) – Hugh Nov 12 '20 at 11:03
  • I updated the question. I think it is linked to localhost not existing at the windows laptop. When I replace localhost with the ip it works – T. Karter Nov 12 '20 at 11:09
  • If you try to access the backend from your Windows computer, you need to replace localhost with the ip address – Hugh Nov 12 '20 at 11:11
  • Sure, and know the question: How can I handle this? – T. Karter Nov 12 '20 at 11:12
  • I'm pretty sure if you add `app.use(cors())` in your backend it will work [cors](https://www.npmjs.com/package/cors) – Hugh Nov 12 '20 at 11:16
  • That's already in my backend. I'm sure, if I replace localhost with the ip in my api call in the frontend, it will work. But couldn't that be more flexible (hat's my original question). When I deploy my app to my server, I'll have the same issues with ip and / or localhost. – T. Karter Nov 12 '20 at 11:25
  • Ok I understand your issue now. You can access `process.env.NODE_ENV` to test if you're in development or production: https://stackoverflow.com/a/16979503/10333882 – Hugh Nov 12 '20 at 11:28
  • I checked the `process.env.NODE_ENV` on my MacBook and on my windows laptop. For both it is `development`. Thus, that couldn't be the trigger like `process.env.NODE_ENV === "development" ? 'localhost' : '192.166.15.85'` – T. Karter Nov 12 '20 at 11:33
  • You can change the NODE_ENV value like this: `NODE_ENV=mac-development node app.js` and `NODE_ENV=windows-development node app.js`. Hope this helps – Hugh Nov 12 '20 at 11:43
  • I set and verified the `NODE_ENV` to production on the windows laptop, but it prints development. I think, this is because I don't run the app on the windows machine. I access it trough the IP and the app runs on the MacBook, thus it displays the variable of the machine where it runs. – T. Karter Nov 12 '20 at 11:50
  • 2
    Yes you're right, you could try to do a similar thing with `window.location.hostname` – Hugh Nov 12 '20 at 11:54
  • That's it. If you'll post it as an answer, I'll accept it. Thank you – T. Karter Nov 12 '20 at 12:16

1 Answers1

2

You can get the current hostname by using window.location.hostname and then conditionally change the url

Hugh
  • 366
  • 1
  • 12