React and spring boot api at one VPS - reactjs

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?

Related

Is there a way to make a request server-side on a client-side rendered PWA?

I'm building a small PWA so I can control a few smarthome devices through MQTT. It's written in React and hosted by an Nginx webserver. Currently, on load of the application, it uses MQTT.js to make a connection to the MQTT server over wss on port 8883. But this feels wrong-- my phone shouldn't be connecting to the MQTT server directly, the requests should be getting made from the Nginx container to the MQTT container, not my phone. While I'm sure this is possible I'm not sure how to even start setting this up. What is needed/what should I be searching for?

intermediate hops in nginx reverse proxy

I am new to nginx and doing full stack development for the first time. Could you please help me understand the below logic
Lets say we are building a chatting app. We have 3 servers (EC2 instances)
server_nginx - ec2 running a nginx server working as reverse proxy
server_react - ec2 running a react project through nginx as web server
server_spring - ec2 running a spring boot project through nginx as web server
My reverse proxy is running through SSL/https. Initially everything was happening on same machine, so I made my spring boot service also ssl because I could not initiate a http connection over https. Now the I started separating out the instance as mentioned above (3 ec2 instances). I was expecting that the connection to my backend would fail. Reason :
user connects to reverse proxy through https domain (lets say mydomain.com).
The request comes to server_nginx(mydomain.com).
From here this proxies this to server_react (which is running on simple http). This is the server where my react code is hosted
This react code tries to initiate a web socket connection to server_spring where I have enabled the CORS for mydomain.com. So I was expecting that the connection would fail here as this is a different IP now. But surprisingly all the apis are getting the response as if I am hitting it from mydomain.com
So can anyone please help me understand why is the behaviour like this
Thanks.

Forcing JS fetch to use non-https

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?

SignalR with Angular front-end works on localhost, but doesn't work remotely

I have two Azure Web App Services: front-end (written on Angular) and back-end (written in C# with SignalR). Either of them is placed on its own server, and I am trying to make front-end connect to back-end. Previously everything worked locally when I ran it on localhost, with http, but when I try to do the exact same thing on Azure (I replaced localhost with azure website domains), I get this error in Chrome:
I see that https is replaced by 'wss', which I guess is not fine for SignalR (because it's supposed to fall back to https/https if wss/ws is unavailable, as one of the commenters stated). So apparently my front-end can't see my backend.
What I've tried so far:
Changing protocols to http, the way it was with localhost
Setting backend to listening to 0.0.0.0:5000
Turning on Web Sockets in Azure settings (on both client and server)
What is my problem, and how do I connect my client side to the server side? Thanks.
You should not use port 5000 on App Service. Configure your app so that it only uses the default ports when deployed (effectively port 80 and 443). WSS/SignalR works fine over these default ports.
You can also see the list of exposed ports.

Reactjs fetching data from backend outside local network

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

Resources