How to Fix Mixed Content Error When Proxying Requests to Backend with Nginx?

I'm trying to host two services on the same machine: a Next.js frontend running on port 3001, and a backend service running on port 8000. The frontend should be publicly accessible via HTTPS, while the backend should only be accessible locally (not publicly available).

I can access the frontend at https://<my-server-name>, but when I try to make a fetch request from the frontend to https://<my-server-name>/server/..., I get a mixed content error.

Here's my Nginx configuration:

# Redirect HTTP to HTTPSserver {    listen 80;    listen [::]:80;    server_name <my-server-name>;    return 301 https://$server_name$request_uri;}# SSL supportserver {    listen 443 ssl http2;    listen [::]:443 ssl http2;    server_name <my-server-name>;    ssl_certificate <my-cert>;    ssl_certificate_key <my-cert-key>;    include snippets/ssl-params.conf;    location / {        proxy_pass http://127.0.0.1:3001/;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection 'upgrade';        proxy_set_header Host $host;        proxy_cache_bypass $http_upgrade;    }    location /server/ {        proxy_pass http://127.0.0.1:8000/;        proxy_http_version 1.1;        proxy_set_header Upgrade $http_upgrade;        proxy_set_header Connection 'upgrade';        proxy_set_header Host $host;        proxy_cache_bypass $http_upgrade;    }}

I've tried adding upgrade headers and the X-Forwarded-Proto header, but the mixed content error persists. Why is this happening, and how can I fix it?

Thanks for any help!