Orthanc + OHIF Viewer V3 + Nginx ?

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

I have no idea if this is the right place but since I know a lot of Orthanc users use OHIF viewer with Orthanc it seems logical to ask here…

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 OHIF 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.

SharedArrayBuffer is only available if you are accessing a secure (https) site. Are you using https to serve the site?

James

Hello Rana,

Your Orthanc and NGINX configurations are correct. You need to add the cross-origin headers to the server running OHIF Viewer itself for the MPR functionality to work. Add the following headers to server you’re hosting OHIF Viewer on:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

I use S3 and CloudFront as my solution for hosting OHIF Viewer. If you’ve got a similar environment then I can help you to get them added there.