Iframe 内的 Nuxt 应用程序提供不匹配的子节点与 VNodes

Question

美好的一天，

我在 docker 容器中设置了一个 nuxt 开发服务器，并希望在 iframe 中呈现它。位于 vue 应用程序/Directus v9 模块中。

http://api.test.lan << directus app << exposed on nginx
http://devServer:3000 << nuxt dev server << inside docker network

我已经在 /devServer/iframe 上的 directus 内部设置了一个代理，以将流量代理到 docker 网络内的开发服务器运行。

http://api.test.lan/devServer/iframe >> http://devServer:3000

这让我可以使用 src="/devServer/iframe"

在 iframe 中加载 devServer

但这给我带来了麻烦，因为 nuxt 应用程序也是运行客户端，因此试图解决不存在的 http://api.test.lan/_nuxt/* _loading etc

所以我在 directus 中设置了一个代理来将所有 _* 请求代理到 http://devServer:3000

解决了客户端无法访问的问题..

现在页面正在加载，它显示页面内容半秒钟，然后显示找不到页面，

chrome devtools 抱怨子节点与 VNode 不匹配，

现在奇怪的是，它抱怨的元素甚至不在应用程序中了，它以前是。我可以在 iframe 重定向到页面之前看到 iframe 加载了正确的数据，似乎 iframe 不知何故卡住了，清理浏览器缓存似乎不起作用。 firefox 和 chrome 有同样的问题，如果不在 iframe 中，应用程序运行正常..

运行nuxt appssr: true || false

没有区别

所以我有点不知道为什么会这样。有谁知道我该如何解决这个问题。？

编辑：该页面被重定向到 nuxt 错误页面，我可以从该页面返回主页，然后页面加载没有问题，js 工作，热重载工作.. 一切

也在访问 http://api.test.lan/devServer/iframe，该页面也像在 iframe 中一样加载，但随后它以同样的方式重定向到错误页面

所以我想这仍然是一个代理问题，可能遗漏了一些明显的东西，我正在使用 express-http-proxy 我可以访问任何 _nuxt/**/*.js 文件以及 _loading/sse 和 __webpack_hmr/client 事件流，方法是使用 http://api.test.lan/devServer/iframe 作为基础 URL.

从 devtools 看来它与水合作用有关。

亲切的问候。

Answer 1

好吧，经过更多的尝试，我发现了一个不同的解决方案.. 对于也想这样做的人来说，这很简单，在 nuxt.config.js 中添加以下内容：

build: {
    publicPath: '/pathToProxy/_nuxt/',
  },
router: {
    base: '/pathToProxy',  
  },

这将设置您的默认路由器路径，以便每个请求都以 '/pathToProxy' 开头，SSR 请求以 '/pathToProxy/_nuxt/'

开头

然后使用 express-http-proxy 从 express

router.use(
  "/pathToProxy*",proxy("InternalAdressNuxtDevServer", {
    proxyReqPathResolver: (req) => {
     return new Promise(resolve => {
        resolve(req.originalUrl);
      });
    },
  })
);

这将为您的 nuxt 应用程序创建一个适当的代理，并且它会像一个魅力一样工作..

干杯！

Iframe 内的 Nuxt 应用程序提供不匹配的子节点与 VNodes

Nuxt app inside Iframe gives mismatching childNodes vs VNodes

javascript

iframe

proxy

nuxt.js