Nginx с сохранением маршрутов vuejs

Question

У меня есть страница vue для загрузки dicom-изображения средства просмотра с открытым исходным кодом под названием "OHIF".

Чтобы проверить, я только что создал запись в файле хостов Windows как: 127.0.0.1 gestan1.myapp.local

У меня также есть архиватор изображений, работающий на localhost:8042.

Я настроил OHIF для встраивания его на мою страницу vue.

Я настроил nginx для проксирования местоположения "orthanc" на сервер изображений. Поначалу все работает хорошо.

Проблема в том, что когда я вручную обновляю свою страницу vue.

Когда я получаю изображение, URL-адрес браузера в адресной строке меняется на что-то "https://gestan1.myapp.local/viewer/1.2.826.0.1.3680043.8.1055.1.20111103111148288.98361414.79379639".

Затем, если я обновляю страницу, у меня проблема с маршрутизатором, потому что у меня нет маршрутов, начинающихся с "viewer".

Есть ли способ решить эту проблему с помощью nginx? Я думаю, что это можно было бы решить, если бы OHIFViewer мог получать изображения без изменения моего маршрута vuejs. Но я не знаю, как это сделать.

//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

Я ни в коем случае не эксперт по Nginx. При этом у меня конфигурация, аналогичная вашей, для приложения Vue.js, работающего в модуле Kubernetes, с Nginx перед приложением для обслуживания файлов. Единственная разница между моей конфигурацией и вашей - это одна строка:

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

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