Buenos días,.
Configuré un servidor de desarrollo nuxt dentro de un contenedor docker y quiero renderizarlo dentro de un iframe. que se encuentra dentro de una aplicación vue / módulo Directus v9.
http://api.test.lan << directus app << exposed on nginx http://devServer:3000 << nuxt dev server << inside docker networkConfiguré un proxy dentro de directus en /devServer/iframe para enviar el tráfico al servidor de desarrollo que se ejecuta dentro de la red docker.
http://api.test.lan/devServer/iframe >> http://devServer:3000 esto me permitió cargar el devServer dentro del iframe con src="/devServer/iframe"
pero esto me dio problemas ya que la aplicación nuxt también se ejecuta en el lado del cliente y, como resultado, estaba tratando de resolver http://api.test.lan/_nuxt/* _loading etc que no existía
así que configuré un proxy dentro de directus para enviar todas las solicitudes _* a http://devServer:3000
esto resolvió el problema de que el lado del cliente no podía acceder.
ahora la pagina esta cargando muestra el contenido de la pagina por medio segundo y luego da pagina no encontrada,
chrome devtools quejándose de la falta de coincidencia de childNodes vs VNodes,
ahora lo extraño es que el elemento del que se queja ya ni siquiera está en la aplicación, estaba antes. Puedo ver antes de que el iframe redireccione a la página no encontrada que el iframe está cargado con los datos correctos, parece que el iframe está atascado de alguna manera, la limpieza del caché del navegador no parece funcionar. Firefox y Chrome tienen el mismo problema, la aplicación funciona bien si no está dentro del iframe.
no hay diferencia entre ejecutar la aplicación nuxt ssr ssr: true || false
así que estoy un poco perdido sobre por qué sucede esto ... ¿alguien sabe cómo puedo abordar este problema?
EDITAR: la página se redirige a la página de error nuxt, desde la cual puedo volver a la página de inicio, y luego la página se carga sin problemas, js funciona, la recarga en caliente funciona ... todo
también visitando http://api.test.lan/devServer/iframe , la página también se carga como en el iframe pero luego falla de la misma manera al redirigir a la página de error
así que supongo que esto sigue siendo un problema de proxy y probablemente me falte algo obvio, estoy usando express-http-proxy puedo visitar cualquier _nuxt/**/*.js y también _loading/sse y __webpack_hmr/client event-steams usando http://api.test.lan/devServer/iframe como URL base.
de devtools parece que tiene que ver con la hidratación.
Saludos cordiales.
Bueno, después de jugar un poco más, encontré una solución diferente ... para las personas que también quieren hacer esto, es bastante simple, en nuxt.config.js agregue lo siguiente:
build: { publicPath: '/pathToProxy/_nuxt/', }, router: { base: '/pathToProxy', }, Esto establecerá la ruta de su enrutador predeterminado para que cada solicitud comience con '/pathToProxy' y las solicitudes SSR con '/pathToProxy/_nuxt/'
luego desde express usando express-http-proxy
router.use( "/pathToProxy*",proxy("InternalAdressNuxtDevServer", { proxyReqPathResolver: (req) => { return new Promise(resolve => { resolve(req.originalUrl); }); }, }) );Esto creará un proxy adecuado para su aplicación nuxt, y funcionará de maravilla.
¡Salud!