1

我有一个 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".

然后，如果我在页面上进行刷新，我会遇到路由器问题，因为我没有以“查看器”开头的路由。

有没有办法用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
      );
    }
  },
};
4

1 回答 1

0

我绝不是 Nginx 的专家。话虽如此，对于在 Kubernetes pod 中运行的 Vue.js 应用程序，我有与您类似的配置，应用程序前面有 Nginx 来提供文件。我的配置和你的配置之间的唯一区别是这一行：

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


# Mine
try_files $uri /index.html =404;
于 2020-08-03T01:54:26.167 回答