Viewers: OHIF V3 with Orthanc MPR works fine on localhost but SharedArrayBuffer error over internet

I have been pulling my hair out over the last three days trying to figure this out without any luck…

Describe the Bug

OHIF V3 with Orthanc MPR functionality works fine on localhost but Error: Uncaught (in promise) Error: SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/ error occurs when accessing over that internet

Steps to Reproduce:

1. open any study on localhost and switch to MPR view. It will work find
2. open any study over the internet and switch to MPR view. It will generate Error: Uncaught (in promise) Error: SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/ error in browser console and MPR will not generate.

my nginx config file is below:

worker_processes 1;

events { worker_connections 1024; }

http {

    upstream orthanc-server {
        server 127.0.0.1:8099;
    }

    server {
        listen [::]:8099 default_server;
        listen 8099;

        # CORS Magic
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow_Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';

        location / {
		
			if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow_Credentials' 'true';
                add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
			try_files $uri $uri/ /index.html;
			add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Origin' '*';
			add_header Cross-Origin-Opener-Policy same-origin;
			add_header Cross-Origin-Embedder-Policy require-corp;
			add_header Cross-Origin-Resource-Policy same-origin;
				  }
				  
				  
		location /orthanc/{
        
            proxy_pass http://localhost:8042;
            proxy_set_header Authorization "Basic YWxuYXNhcnBhY3MbyybyybNhcnBhY3M1Nzc=";
            proxy_set_header Host $Host:8099/orthanc/;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;

            # CORS Magic
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow_Credentials' 'true';
            add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
            rewrite /orthanc(.*) $1 break;
                           }     		  
    }
}

My app-config.js is below

window.config = {
    routerBasename: "/",
    extensions: [],
    modes: [],
    customizationService: {},
    showStudyList: !0,
    maxNumberOfWebWorkers: 3,
    omitQuotationForMultipartRequest: !0,
    showWarningMessageForCrossOrigin: !0,
    showCPUFallbackMessage: !0,
    showLoadingIndicator: !0,
    maxNumRequests: {
        interaction: 100,
        thumbnail: 75,
        prefetch: 10
    },
    dataSources: [{
        friendlyName: "dcmjs DICOMWeb Server",
        namespace: "@ohif/extension-default.dataSourcesModule.dicomweb",
        sourceName: "dicomweb",
        configuration: {
            name: "aws",
            wadoUriRoot: '/orthanc/wado',
			qidoRoot: '/orthanc/dicom-web',
			wadoRoot: '/orthanc/dicom-web',
            qidoSupportsIncludeField: !1,
            supportsReject: !1,
            imageRendering: "wadors",
            thumbnailRendering: "wadors",
            enableStudyLazyLoad: !1,
            supportsFuzzyMatching: !1,
            supportsWildcard: !0,
            staticWado: !0,
            singlepart: "bulkdata,video,pdf"
        }
    }, {
        friendlyName: "dicom json",
        namespace: "@ohif/extension-default.dataSourcesModule.dicomjson",
        sourceName: "dicomjson",
        configuration: {
            name: "json"
        }
    }, {
        friendlyName: "dicom local",
        namespace: "@ohif/extension-default.dataSourcesModule.dicomlocal",
        sourceName: "dicomlocal",
        configuration: {}
    }],
    httpErrorHandler: e => {
        console.warn(e.status), console.warn("test, navigate to https://ohif.org/")
    },
    defaultDataSourceName: "dicomweb",
   
};

The current behavior

OHIF V3 with Orthanc MPR functionality works fine on localhost but Error: Uncaught (in promise) Error: SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/ error occurs when accessing over that internet

The expected behavior

It should work over the internet as well as localhost

I tried using the example nginx config file here as a guide >>> https://github.com/OHIF/Viewers/blob/master/.docker/Nginx-Orthanc/config/nginx.conf but no luck.