SSL Configuration Issues with React Frontend and Node Backend on Same Ubuntu Server

Frontend
1

I’m running into some SSL problems with my setup on an AWS Ubuntu VPS. I have both my React frontend and Node.js backend hosted on the same machine. The React app runs through nginx while the Node backend uses pm2 for process management.

Before adding SSL, everything worked fine with my React environment variable set to REACT_APP_API_ENDPOINT: http://[server_ip]:4000. But once I enabled SSL certificates in nginx, I’m getting two different issues depending on my configuration:

Option 1: When I change to https://[server_ip]:4000 in my React config, I get an ERR_SSL_PROTOCOL_ERROR.
Option 2: If I keep using http://[server_ip]:4000, browsers throw Mixed Content warnings.

Has anyone dealt with this before? I’ve temporarily disabled SSL (commented out the https parts) until I figure this out.

Here’s my current nginx configuration:

server {
    # SSL config commented out for now
    # listen [::]:443 ssl ipv6only=on;
    # listen 443 ssl;
    # ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    # ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
    
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com;
    
    root /var/www/html;
    index index.html index.htm;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Any suggestions would be really helpful!

2

you might wanna try settin up a reverse proxy in nginx for your API. just add a block like location /api/ { proxy_pass http://localhost:4000/; }. then change your React endpoint to /api or https://example.com/api. this should help with those mixed content warnings.

3

what error logs are u seeing from your node backend with the https connection? did u restart nginx after commenting out the ssl stuff? hard to debug the mixed content issue without knowing what’s in your browser console.

4

Your Node.js backend doesn’t have SSL configured, but your frontend’s now running on HTTPS. I ran into this same problem and found the easiest fix is proxying API requests through nginx instead of hitting the backend directly. Add this to your nginx config: location /api/ { proxy_pass http://localhost:4000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } Then change your React environment variable to REACT_APP_API_ENDPOINT: https://example.com/api. nginx handles SSL termination and forwards requests to your Node backend over HTTP internally. Your backend doesn’t need SSL setup, and you won’t get mixed content errors since everything comes from the same HTTPS origin.