React app call to localhost node server on hostedVM

Question

I'm serving a built react file using Nginx . I am able to access the react app in the browser on my vm's IP address.

I have another server running on my VM on port 8080 , the API of the react app.

In my react I use axios calls like

const http = "http://localhost:8080";
..
axios.post(`${http}/api/auth/login`, { credentials }).then(res => res.data.user),

In my browser after I access my VM's ip address I can see in the console that the so called axios calls go to http://myActualVMIpAddress/api/.. instead of the localhost path as I was expecting.

I have checked the routes using postman of the api server.

I don't have experience with deployment. How do I make the link between the react app and the api server to work?

Answer 1

It is not a good idea to hard code localhost:8080 into your client JS, when your user loads the client files they will try and make a request on your users computer which is what localhost resolves to.

Easiest is to serve your client files from your api server. If you want to keep these separate then you have to use the IP of your API server (not localhost) and setup CORS.