Nginx with vuejs preserving routes

Question

I have a vue page to load a open source viewer dicom image called "OHIF".

In order to test I just created an entry into hosts windows file as: 127.0.0.1 gestan1.myapp.local

I also have a image archiver runing into localhost:8042.

I have configured OHIF to embed it into my vue page.

I have configured nginx to proxy the location "orthanc" to image server. At first, all works well.

The problem is that when I do a manual refresh of my vue page.

When I get an image the url browser in address bar changes to something "https://gestan1.myapp.local/viewer/1.2.826.0.1.3680043.8.1055.1.20111103111148288.98361414.79379639".

Then, If I do a refresh on page, I have a router problem because I have no routes starting with "viewer".

Is there a way to solve it with nginx? I think it could be solved, if OHIFViewer could get the images without change my vuejs route. But I don´t know how to do it.

//nginx
//server static file to my vuejs app
location / {
 access_log off;
 root     ../gestan-cloud/dist;
 index    index.html index.htm;
 try_files $uri $uri/ /index.html;
}

//server image to OHIF in my html page
location /orthanc/ {
  rewrite /orthanc(.*) $1 break;
  proxy_pass http://localhost:8042;
  proxy_set_header HOST $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_request_buffering off;
  proxy_max_temp_file_size 0;
  client_max_body_size 0;
  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' '*';
}

//html vue tenmplate
<template>
 <div id="viewer" height="800px"></div>
<template>
<script>
export default {
  name: "EmbeddedViewer",
  mounted() {
    let componentRenderedOrUpdatedCallback = function() {
      console.log("OHIF Viewer rendered/updated");
      window.ohifRendered = true;
    };
    let containerId = "viewer";
    if (!window.ohifRendered) {
      window.OHIFViewer.installViewer(
        {
          routerBasename: "/",
          extensions: [],
          showStudyList: true,
          filterQueryParam: false,
          servers: {
            dicomWeb: [
              {
                name: "Orthanc",
                wadoUriRoot: "/orthanc/wado",
                qidoRoot: "/orthanc/dicom-web",
                wadoRoot: "/orthanc/dicom-web",
                qidoSupportsIncludeField: false,
                imageRendering: "wadors",
                thumbnailRendering: "wadors",
                requestOptions: {
                  requestFromBrowser: true,
                },
              },
            ],
        containerId,
        componentRenderedOrUpdatedCallback
      );
    }
  },
};
   

Answer 1

I am, by no means, an expert with Nginx. That being said, I have a similar configuration to yours for a Vue.js app running in a Kubernetes pod with Nginx in front of the app to serve up the files. The only difference between my configuration and yours is this one line:

# Yours
try_files $uri $uri/ /index.html;

# Mine
try_files $uri /index.html =404;