远程应用服务器后面的 Vuepress 为带有 iframe 的页面提供 404答案

【问题标题】：Vuepress behind Remote App Server give 404 for pages with iframe远程应用服务器后面的 Vuepress 为带有 iframe 的页面提供 404
【发布时间】：2019-10-21 08:54:36
【问题描述】：

我用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;
    }

 }

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

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

【问题讨论】：

标签： javascript vue.js vue-router remote-access vuepress

【解决方案1】：

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

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();
        }

      })
    }

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

这不一定相关，但我通过遵循this post 建议将其设置如下，我也修复了我的 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";
      }

    }

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

【讨论】：