Error loading images OHIF - Orthanc

Describe Your Question

I’m trying to access a dataset of more than 100 studies.
The DICOMs are stored in Orthanc and
I connect to Orthanc via DICOMweb.
The OHIF viewer shows all studies in the database but does not display any images.
I can’t figure out what’s going on. Is my database too large?
The only error or warning I get is this:

@ohif/viewer: Entrypoint app = vendors~app.css vendors~app.js app.css app.js
@ohif/viewer: WARNING in /4.js is 6.32 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
@ohif/viewer: WARNING in /app.js is 5.46 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
@ohif/viewer: WARNING in /vendors~app.js is 41.7 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
@ohif/viewer: WARNING in /vendors~dicom-microscopy-viewer.js is 5.43 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

Is the application running out of memory? How is it possible to troubleshoot and solve this issue?

Thanks in advance.

I’ve just discovered this javascript error:

Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each resource must specify a suitable Cross-Origin Resource Policy (CORP). This behavior prevents a document from loading cross-origin resources which don’t explicitly grant permission to be loaded.
To solve this, add the following to the resource’ response header:
Cross-Origin-Resource-Policy: same-site if the resource and your site are served from the same site.
Cross-Origin-Resource-Policy: cross-origin if the resource is served from another location than your website. ⚠️If you set this header, any website can embed this resource.
Alternatively, the document can use the variant: Cross-Origin-Embedder-Policy: credentialless instead of require-corp. It allows loading the resource, despite the missing CORP header, at the cost of requesting it without credentials like Cookies.

Request	Parent Frame	Blocked Resource
 polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find

which seems to be a CORS related issue although I| am using the development server with PROXY_TARGET and PROXY_DOMAIN set.

ross-env NODE_ENV=development PROXY_TARGET=/dicom-web PROXY_DOMAIN=http://localhost:8042 APP_CONFIG=config/docker_nginx-orthanc.js webpack-dev-server --config .webpack/webpack.pwa.js

Is this CORS issue the reason for the failing image loading? And how could it be solved?
Thanks

assuming OHIF and Orthanc are hosted on different domains, use a proxy server to handle CORS

e.g. nginx configuration

CORS

 if ($request_method = 'OPTIONS') {
     add_header 'Access-Control-Allow-Origin' "$http_origin" always;

    # Om nom nom cookies
    #
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;

    #
    # Custom headers and headers various browsers *should* be OK with but aren't
    #
    add_header 'Access-Control-Allow-Headers' 'X-CustomHeader,Authorization,Content-Type,Accept,Origin,User-;
    #
    # Tell client that this pre-flight info is valid for 20 days
    #
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
 }
 if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;

    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;

    add_header 'Access-Control-Allow-Headers' 'X-CustomHeader,Authorization,Content-Type,Accept,Origin,User-;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range,Content-Disposition,Set-Cookie';
 }
 if ($request_method = 'GET') {
    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;

    add_header 'Access-Control-Allow-Headers' 'X-CustomHeader,Authorization,Content-Type,Accept,Origin,User-;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range,Content-Disposition,Set-Cookie';
 }