How do I make hydration work with a Nuxt, Webpack, SSR app behind a proxy forward from a totally different domain?
Background:
I'm running a Nuxt 2.5.17, universal mode (SSR) application with publicPath build/chunk files on a separate server. Webpack version 4.
The app runs and works great on a K8S pod on GCP with Ingress I can visit it directly and it works fine.
But...
For business-logic reasons that I'm sadly stuck with, I have to have the app behind proxy on a totally separate domain and network. Example: https://anotherwebsite.com/page1 ... https://anotherwebsite.com/page999, etc.
Anotherwebsite.com uses ProxyPass to forward to my application:
https://anotherwebsite.com/page1 ProxyPassMatches to https://my-nuxt-app-on-k8s-IP:8080/page1
When the user visits https://anotherwebsite.com/page1 their request is forwarded to my Nuxt app and the HTML content is delivered back to the browser. The page renders briefly and then reverts to a whit Nuxt error blank screen. All the chunks load fine from the publicPath. When hydration happens it breaks the page. (I've isolated it down to one particular build file that causes the page to blank-out) If I block the chunk files, the HTML renders, but I lose @click event type interaction because it doesn't receive hydration.
I realise that the Webpack chunks are thinking that they're in the context of the app itself and not aware that the HTML calling it is being proxy forwarded to.
I'm hoping someone with superior knowledge of Webpack can at least point me in the right direction and help me with my edge-case. Webpack & its bundling is confusing to me.
Per @kissu 's comment regarding K8s config:
My Ingress config requires the hostname to be anotherwebsite.com, so any request that doesn't have that hostname will return a not found error.