Configuring Nginx and Tomcat to Access HTTPS content

I'm using nginx as a load balancer and reverse proxy for Java spring boot + Angular application on tomcat. I've total 3 servers, 1 has nginx and other two has application hosted on it.

I've configured HTTPS and SSL on nginx so that users can communicate over HTTPS. With the below configuration I'm able to reach application's login page on https, but when I click on login button I'm getting error in console

Mixed Content: The page at 'https://example/app/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://172.16.1.70:8081/app/api/login'. This request has been blocked; the content must be served over HTTPS.

Here's my Nginx Config

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    access_log  logs/access.log;
    
    # Load Balancer Setup
    upstream tomcat {
        server 172.168.1.10:8443;
        server 172.168.1.15:8443;
        ip_hash;
    }
    server {
        listen 80 ;
        listen  443 ssl http2;
        
        server_name  localhost;
        ssl_certificate      C:/ssl/sslcert.pem;
        ssl_certificate_key  C:/ssl/sslcert-key.pem;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
                
    location /app {
        proxy_read_timeout 120;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cookie_path ~*^/.* /;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://tomcat;
        }
    
    # Auto redirect to https
    if ($scheme != "https") {
        return 301 https://$host$request_uri;
        }
    
    # Auto redirect to localhost/app
    location / {
        return 307 /app;
        }
    }
}

Here's my tomcat server.xml config

<Connector port="8081" protocol="HTTP/1.1"
               connectionTimeout="20000"              
               redirectPort="8443"/>
               
    <Connector port="8443" protocol="HTTP/1.1"
           connectionTimeout="20000"
           proxyPort="443"
           scheme="https" secure="true"
            />

I tried to debug by checking network tab and it somehow redirecting login page to http://172.168.1.10:8081/app/api/login instead of http://172.168.1.10:8443/app/api/login.

How can I resolve this issue, Any help would be appreciated.

Configure your backend server to server the URL that points to the reverse proxy. With Tomcat this is usually done with the proxyName and the proxyPort attributes at the connector. You are missing the former.

Depending on how the application that is running on Tomcat is built it might be necessary to configure it in some application specific configuration as well.