The issue I have is as follows,
I have a reactjs frontend and a asp.net core backend, I am trying to get data from the backend, by fetching, when accessing my frontend from outside my local network. My frontend is hosted using IIS on port 80, and portforwarded this port using ngrok. I am able to access my frontend now from outside my local network, but I am not able to fetch data from the backend, mainly because I am not sure where to make the calls to specifically.
The backend is listening on port 5000 and the frontend is making fetch requests to this port along with the target ip adress. But it can't connect. I have tried making calls using my public ip, local ip or just 0.0.0.0. I need it to work on my own pc, local network and outside my local network.
This might be a stupid issue that is easily solved, but I don't really have a clue where to begin here, hopefully someone can help me a bit further trying to resolve this issue.
When you call an API from your SPA (react app), the request is triggered from the browser showing your app.
So, when you load your port-forwarded app from outside your network, your browser, which is outside your network, is trying to call your API which is inside.
You have 2 possible solutions:
1/ port-forward the port 5000 of your router to the internal IP address (and port) of your server (e.g 192.168.1.10). Then from your React app, make the requests to your public IP address with the port (e.g 81.xx.xx.xx:5000)
2/ or, as you're already using Ngrok, install Ngrok on your server to get a direct URL to its port (ngrok http 5000) and make your requests to that URL
Related
I have an in-development ReactJS application that I run locally from my computer (on localhost). I have also set up local certs so that the application runs on HTTPS (https://localhost).
I also have a backend application located at an HTTP endpoint hosted in the cloud. Of course, the backend application will eventually be located at an HTTPS endpoint eventually, but that process hasn't been started yet.
I am trying to hit that HTTP endpoint from my local HTTPS ReactJS application by using fetch. However, something is upgrading the connection from HTTP to HTTPS automatically.
The only relevant information I have found on this is this post. I have tried the accepted answer (setting the referrerPolicy to unsafe-url) but that did not work for me.
Any other suggestions?
I’m trying to configure my react and spring boot rest api at my vps server and I met we problems. Firstly, when I run my front api (react) and I’m trying to call my backend (spring boot) I must use https://example.com:8080 address.
When I try to use my vps ip with port, my https is turns off… its write that my https is dangerous. Next, when im trying to call https://localhost:8080 i have error that i cannot connect to this address.
So:
call to https://example.com:8080 work
Https://ipaddress:8080 not working (lost my ssl certificate)
Https://localhost:8080 not working (connection refused)
My backend is work on port 8080. Is running, when im trying to call localhost by curl in command line its working, but on browser not… how to call api? Is example.com:8080 correctly connection? I think that can be some lags because of ssl handshake…
I will add that when im running front and backend locally, localhost is working…
What is the best practice to call backend when im running front and backend on one vps?
I am running a Nginx web server in a device that has two different network interfaces. I want to serve a React App on port 80 that makes API calls to an API server on a different port of the same device. I have configured Nginx to listen on port 80 and it correctly serves the React app on both interfaces. However, making API calls is trickier.
If I had only one interface with a fixed IP, I would set that IP as the API server address in the React APP and everyhting would be fine. However, when having several interfaces, the React App does not which interface has been used to serve it. As a result, it does not know which is the IP of the API server.
This question is also valid for a device that has only one interface but whose IP changes dyncamically. Nginx serves the web page right regardless of the IP but the React App needs to know the IP address to make API calls to.
I understand that a common solution is to assign a domain to the API server but in my scenario the connection to the device takes place only on a local network.
Solutions I have considered:
Having a fixed IP on both interfaces and have nginx serve a different React App to each of the interfaces. The apps would be the same except for the API server address parameter. This is probably an overkill.
Requesting the user to enter the IP on the React App when running in the browser. This is not really user friendly.
What I would actually like would be a method for the React App to know the IP through it has been served or a method for Nginx to serve a web with a configuration depending on the device IP. Is there any solution like these?
As the React app is served in the local network and it does not use a domain, it is requested in the browser using the device IP as href. As a result, the app can get the IP address of the device using the javascript method window.location.href and use it as the API server address.
When developing my front-end having used create-react-app, I can connect to it on my local machine using http://localhost:3000/ or on my network using http://192.168.1.160:3000/. My back-end (NodeJS/Express) is also on my local machine on http://localhost:5000/.
On my front-end, I have the URL to my back-end stored in an env variable as http://localhost:5000/. The problem is when I connect to my front-end from my mobile(on my network using http://192.168.1.160:3000/), it does not recognize http://localhost:5000/. I'm guessing it is because I have to use http://192.168.1.160:5000/ to connect to the back-end on my network.
This seems to require changing the back-end URL in my env file every time I want to test it out on mobile. Is there a way I can connect to my front and back-end from both my local machine and my network without having to constantly change the URL?
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?
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.