This question does not show any research effort; it is unclear or not useful
We are currently facing an issue with the Progressive Web Application (PWA) built using ReactJS. The PWA is deployed as a container within a Kubernetes cluster on the cloud and is intended to connect to a NodeJS server that is running as a container on a Raspberry Pi device. The desired approach is for the PWA to be accessed through a mobile device’s browser, and for the mobile device to provide internet to the Raspberry Pi through its mobile hotspot, so that both the PWA and the server will be on the same local network and the PWA can communicate with the server using the Raspberry Pi’s local IP address RASPBERRY_LOCAL_IP.
However, during the development process, where the Reactjs app was running on the localhost within the same local network to which the raspberry pi was connected, the Reactjs app could reach the nodejs server on the raspberry pi using its RASPBERRY_LOCAL_IP. we encountered an issue when the Reactjs app was pushed to the cluster to run there as a container and it was then unable to connect to the server. In the last scenario, the Reactjs app runs over HTTPS with a trusted certificate, while the NodeJS server runs over HTTP. This has resulted in a “Mixed Content” error, specifically that “The page at ‘http://RASPBERRY_LOCAL_IP/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://RASPBERRY_LOCAL_IP/’. This request has been blocked; the content must be served over HTTPS.”
This error occurs because the Reactjs app, running in a container in the cluster, is attempting to make an XMLHttpRequest to an endpoint on the NodeJS server that is running over HTTP, which is considered an insecure connection. Since the Reactjs app is running over HTTPS, it can only make secure requests and therefore the request is blocked.
In conclusion, the technical challenge in our Reactjs app’s ability to connect to a NodeJS server is due to the mismatch in the protocol used by the Reactjs app and the NodeJS server. Trying to find a solution to this issue to ensure smooth communication between the Reactjs app and the NodeJS server.
