I'm currently using a Hostinger VPS to host my FERN stack project. I've set up my project in /var/www/saiyoksprings on the VPS, with nginx serving the frontend build and pm2 managing the Node.js backend via server.js. Nginx acts as a reverse proxy between the server and client. Although my domain is managed through Google and supports HTTPS, the VPS server operates on HTTP. To secure the backend, I've tried using a Cloudflare-generated SSL certificate to enforce HTTPS, but I'm facing challenges as it reverts back to HTTP (eg https://xx.xxx.xxx.xxx/api/news).
I suspect that the root cause of this issue is related to the SSL certificate on the VPS. I installed the SSL certificate using Certbot while the domain was still propagating, which might have resulted in the creation of a self-signed certificate and could be causing the browser to flag the content as insecure. My main issue arises when trying to call the URL: https://xx.xxx.xxx.xxx/api/collectionName from the frontend to fetch data for display on the website. How should I go about fixing this?
Images: urlSSL certMixed content error