Nginx: How to deploy front end & backend apps on same machine with same domain but different ports?

I have two apps one for frontend built using ReactJS and one is for backend built using FastAPI. I have server machine where I have deployed both the apps. Now I want to use Nginx (because of SSL) to host both my application on the same machine with same domain name but the ports are different. I know how to do it for different domains or subdomain but I don't have another domain/subdomain with me right now. So I want to aks how I can achive this in Nginx? For example my FE is using port 5000 & BE is using 8000,I am able to configure Nginx to serve my FE but I am getting this error,

Blocked loading mixed active content

because my FE which is httpstrying to connect to backend on port 8000 which is not https.

Here is my nginx config file,

server {
    listen   443 ssl;

    ssl_certificate    /opt/ssl/bundle.crt;
    ssl_certificate_key    /opt/ssl/custom.key;


    # add here the ip address of your server
    # or a domain pointing to that ip (like example.com or www.example.com)
    server_name something-c11.main0.auto.qa.use1.mydomain.net;

    keepalive_timeout 5;
    client_max_body_size 100M;
    access_log /opt/MY_FE/nginx-access.log;
    error_log /opt/MY_FE/nginx-error.log;
    

    # checks for static file, if not found proxy to app
    location / {
        try_files $uri @proxy_to_app;
    }

    location @proxy_to_app {
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;

        proxy_pass http://localhost:5000;
        proxy_redirect off;
    }

 
}

server {
    if ($host = something-c11.main0.auto.qa.use1.mydomain.nett) {
        return 301 https://$host$request_uri;
    }

    listen 80;


    server_name something-c11.main0.auto.qa.use1.mydomain.net;
    return 404;

}

Any help would be appreciated....