frontend HTTPS access to http backend ngix

I have a frontend in Angular which support https,while I have a backend at port 10080 which support http. I try a few way of reverse proxy in the ngix configuration file but it still facing the same issues.

While I try this method always get the error "Access to XMLHttpRequest at 'https://example.com:30080/api/remoteControl/getactiveusers' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

server {
    listen 443 ssl;
    server_name  _;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    ssl_certificate "xxx.crt";
    ssl_certificate_key "xxx.key";
    ssl_session_timeout 1d;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_session_cache shared:SSL:10m;
    ssl_session_tickets off;
    ssl_stapling off;
    
    location / {
     if ($request_method = 'OPTIONS') {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Content-Type text/plain;
        add_header Content-Length 0;
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' *;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

    try_files $uri $uri/ /index.html;
    }
    location ~* \.(eot|ttf|woff|woff2)$ {
     add_header Access-Control-Allow-Origin *;
   }
   

}
server {
    listen       10080 ssl http2;
    server_name  _;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
   ssl_certificate "xxxx.crt";
    ssl_certificate_key "xxx.key";
ssl_session_timeout 1d;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
ssl_session_cache shared:SSL:10m;
    location / {
    
        proxy_pass "http://backend:80" ;
        proxy_set_header Connection Keep-alive;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;    
#            proxy_set_header X-Forwarded-Host $host;
#           proxy_hide_header X-Frame-Options;
        proxy_buffers 4 256k;
        proxy_buffer_size 128k; 
        proxy_busy_buffers_size 256k;
    }
}

Anyone know how to solve this?

Thanks

Your setup has multiple issues.

First, you have two public facing nginx virtual servers, on port 443 and on port 10080. You should only have a server listening to port 443 and reverse proxy requests from there.

Second, your backend is generating content that has links like http://example.com:10080/page. Your backend should generate URLs like https://example.com/page.