0

我用Vuepress 建立了一个静态网站，该网站有一个完整的iframed Tableau仪表板部分。当我通过 Internet 公开网站时，我没有任何问题，一切正常，Tableau 仪表板显示正常。

当网站作为远程应用程序在公司的防火墙后面发布时，问题就开始出现了。本质上，它前面有一个身份验证层，URL 从https://mywebsite.mycompany.com 到https://privateapps.mycompany.com/https/mywebsite.mycompany.com

第一个问题是当它登陆主页时，它会立即重定向到 Vuepress 的 404 页面，如果我点击刷新它会正确显示，并且所有页面都可以正常工作，除了带有 Tableau iframe 的页面，所有这些页面都会自动重定向到 404页。

我认为这可能是 SSR 不匹配，所以我尝试了vuepress-plugin-dehydrate选项没有改变，noSSR但是当我应用noScript选项时，仪表板页面上的错误消失了，但 iframe 不再起作用，因为我的理解是，此选项会删除所有js文件，从而使 iframe 有效地无用...

发生了某种奇怪的重定向冲突，但我不知道如何解决它，我还尝试添加location到我的 nginx 配置中，认为 nginx 的路由与站点的路由冲突，但那里也没有骰子。

 server {
     # listen on port 80 (http)
     listen 80;
     server_name _;

     root /usr/share/nginx/html;

    location / {
      try_files $uri$args $uri$args/ index.html;
    }

 }

在远程应用程序后面时，我也会在页面上收到此警告 - 不确定它是否相关。

在此处输入图像描述

无论如何，我已经尝试了我能想到的一切，但我的想法已经不多了。对此的任何帮助都会非常好。

4

1 回答 1

2

因此，经过大量故障排除后，我能够回答自己的问题。修复实际上很简单，有些人可能会说很优雅。

vuepress 站点搞砸的原因是远程应用程序提供商 PaloAlto，当服务器在防火墙后面的应用程序将 URL 更改为类似的东西https://privateapps.mycompany.com/https/mywebsite.mycompany.com时，问题是添加/https/mywebsite.mycompany.com混淆 vuejs 路由器认为这是一条路径需要解决而不是应用程序的基础。

所以为了解决这个问题，我在 vuepress 中使用了App Level Enhancement，它是这样的：


    export default ({
      Vue, // the version of Vue being used in the VuePress app
      options, // the options for the root Vue instance
      router, // the router instance for the app
      siteData // site metadata
    }) => {

      router.beforeResolve((to, from, next) => {

        // Any path I went redirected to the base I would add to the Array below
        const editable = ['/https/mywebsite.mycompany.com']

        let flag = editable.filter(i => to.fullPath.startsWith(i))

        if(flag.length > 0){
          const newPath = to.fullPath.replace(flag[0],'/');
          //Forcing the router to point to the base of the app
          next(newPath);
        }else {
          next();
        }

      })
    }

解决方案是使用导航守卫 router.beforeResolve，它会在导航被确认之前被调用，毕竟，组件内守卫和异步路由组件都已解决。

这不一定相关，但我通过遵循这篇建议将其设置如下的帖子，也修复了我的 nginx 配置，使其更加健壮：

    server {
      listen 80 default_server;
      listen [::]:80 default_server;

      root /your/root/path;

      index index.html;

      server_name you.server.com;

      location / {
        try_files $uri $uri/ @rewrites;
      }

      location @rewrites {
        rewrite ^(.+)$ /index.html last;
      }

      location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
        # Some basic cache-control for static files to be sent to the browser
        expires max;
        add_header Pragma public;
        add_header Cache-Control "public, must-revalidate, proxy-revalidate";
      }

    }

我希望这篇文章对其他人有用，因为这是一个非常烦人的故障排除问题。

于 2019-06-20T02:37:49.347 回答