保留vuejs路由的Nginx

Question

我有一个vue页面来加载一个名为"OHIF“的开源查看器dicom图像。

为了测试，我刚刚在主机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 pod中，并在应用程序前面使用Nginx来提供文件。我的配置和你的配置唯一的区别就是这一行：

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

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