Use proxy for connect iframe

[wowblvck]

I have a host application that has an iframe embedded into it. The host application is running at: localhost:8888, the iframe application is localhost:5173. Used framework React and React Router Dom in both applications. I want the host and iframe to operate on a single domain (so the iframe can access its parent via window.top). The host has the following settings:

vite.config.js

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig(() => {
  return {
    plugins: [react()],
    server: {
      host: true,
      port: 8888,
      proxy: {
        '/frames': {
          target: 'https://localhost:5173',
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/frames/, ''),
        },
      },
    },
  };
});

Connect iframe

<iframe src={`/frames/preview/${id}`}/>

react-router in iframe:

const router = createBrowserRouter(
  [
    {
      Component: PreviewLayout,
      children: [
        {
          Component: Preview,
          index: true,
          path: ':id',
        },
      ],
    },
  ],
  {
    basename: '/preview',
  },
);

For some reason, the configurator itself gets inside the iframe (in the 'root' element), and not the iframe.

[boomshakar]

@wowblvck I believe answer to this question has been resolved here #15185 (comment)