Error accessing my webapp running inside my Azure vm using public IP

Question

I know this is not the ideal way but nonetheless, I created an Azure VM and deployed my application running react.js as frontend, springboot as backend and database as mysql. I used already created docker images from dockerhub to run the containers. After running all the images as containers, if I user RDP to get a GUI for my VM, I can login and connect and all the components work fine.

But when I use public ip to open the homepage of my app, it is throwing me an error saying that it cannot connect to http://localhost:8081 which is my springboot url. Note that I am able to access my react-app running in my vm but not the springboot backend.

Here are the snippets-

WebPage React-app running on Azure vm accessed using public ip

Error Error when react tries to access springboot for api calls

Just to clarify here are all the port numbers I am using

80- React app and also given as inbound port number in my virtual machine 8081- Springboot running in my vm

Answer 1

As react.js frontend will be running in the browser of users' side, the localhost here is users side localhost, not your Azure VM's, so that users can't access your VM port.

In your react.js frontend code, you should specify your spring-boot URL as http://<your VM piblic IP>:8081 instead of localhost.And you need also to open the 8081 port in the Azure VM network security group so that this port could be accessed by the public network. Detailes see this doc .