Laravel с Vite: запуск сервера разработки в iFrame ⇐ Php

[Anonymous]

Я разрабатываю приложение Laravel, которое работает внутри iFrame. Хотя с продакшен-билдами все работает нормально(

Код: Выделить всё

npm run build

), я не могу заставить Vite работать в режиме разработки, что делает рабочий процесс разработки очень громоздким.
Я разрабатываю веб-приложение, у которого есть магазин приложений, где «приложения» на самом деле представляют собой просто iframe, которым передаются определенные параметры запроса.
Текущая настройка:

Код: Выделить всё

# Terminal 1
php artisan serve

# Terminal 2
npm run dev

# Terminal 3
ngrok http 8000

Проблема:
При доступе к URL-адресу ngrok непосредственно в браузере все работает отлично. Однако когда приложение загружается через iFrame, я получаю ошибки CORS и смешанного контента:

Код: Выделить всё

Access to script at 'http://[::1]:5173/@vite/client' from origin 'https://.eu.ngrok.io'
has been blocked by CORS policy: Permission was denied for this request to access the `unknown` address space.

GET http://[::1]:5173/@vite/client net::ERR_FAILED

Access to script at 'http://[::1]:5173/resources/js/app.ts' from origin 'https://.eu.ngrok.io'
has been blocked by CORS policy: Permission was denied for this request to access the `unknown` address space.

Mixed Content: The page at 'https://
/' was loaded over HTTPS, but requested an
insecure script 'http://0.0.0.0:5173/resources/js/app.ts'. This request has been blocked;
the content must be served over HTTPS.

Что я пробовал:
Базовый HTTPS с mkcert
Создал локальные сертификаты: mkcert localhost.
Обновил файл vite.config.ts, включив в него сертификаты:

Код: Выделить всё

server: {
https: {
key: fs.readFileSync(path.resolve(__dirname, "localhost-key.pem")),
cert: fs.readFileSync(path.resolve(__dirname, "localhost.pem"))
},
host: '0.0.0.0'
}

Результат: возникли ошибки ERR_BLOCKED_BY_CLIENT, поскольку браузер пытался загрузиться с https://0.0.0.0:5173
Прокси-сервер Laravel для Vite:
Добавлен маршрут прокси-сервера в маршруты/web.php:

Код: Выделить всё

Route::any('{vite_path}', function ($vite_path) {
// Proxy logic to forward requests to https://localhost:5173
})->where('vite_path', '.*');

Результат: Получение ошибки 404 для некоторых внутренних модулей Vite:

Код: Выделить всё

GET https://.eu.ngrok.io/node_modules/vite/dist/client/env.mjs net::ERR_ABORTED 404
GET https://.eu.ngrok.io/@id/__x00__plugin-vue:export-helper net::ERR_ABORTED 404

Как настроить Laravel и Vite для совместной работы с HMR?

[*]В идеале мне нужен только один работающий туннель ngrok.
[*]Запуск npm run build работает отлично, но это, конечно, удаляет HMR.
[*]iFrame находится в другом домене, чем туннель ngrok.
/>

Подробнее здесь: https://stackoverflow.com/questions/798 ... -an-iframe