Iframe内的下一个应用程序给出了不匹配的childNodes vs VNodes

Question

大家好。

我已经在docker容器内设置了一个下一个开发服务器，并想在iframe内渲染它。

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

我已经在/devServer/iframe的目录中设置了一个代理，代理流量到运行在docker网络中的dev服务器。

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

这允许我在iframe内加载devServer与src="/devServer/iframe"

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

所以我设置了一个代理在目录代理所有_*请求到http://devServer:3000

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

现在页面正在加载它显示页面的内容半秒，然后给出一个未找到的页面，

chrome devtools抱怨childNodes与VNodes不匹配，

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

运行下一个应用程序ssr: true || false没有区别

所以我有点不知道为什么会发生这种情况…有人知道我怎么解决这个问题吗?

编辑:页面被重定向到下一个错误页面，从中我可以回到主页，然后页面加载没有问题，js工作，热加载工作…每件事

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

失败所以我想这仍然是一个代理问题和问题缺少一些明显的，我使用express-http-proxy通过使用http://api.test.lan/devServer/iframe作为基础URL，我可以访问任何_nuxt/**/*.js文件，也可以访问_loading/sse和__webpack_hmr/client事件流。

from devtools，它似乎与水合作用有关。

亲切的问候。

Answer 1

好吧，经过一些更多的玩我发现了一个不同的解决方案。对于想要这样做的PPL来说，很简单，在nuxt.config.js中添加以下内容:

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

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

from express using express-http-proxy

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

这将创建一个合适的代理到你的下一个应用程序，它将像一个魅力…

干杯!