Laravel mit Vite: Dev-Server in einem iFrame ausführen ⇐ Php

[Anonymous]

Ich entwickle eine Laravel-App, die in einem iFrame ausgeführt wird. Während mit Produktions-Builds alles gut funktioniert (

Code: Select all

npm run build

), ich kann Vite nicht im Entwicklungsmodus zum Laufen bringen, was den Entwicklungsworkflow sehr umständlich macht.
Ich entwickle für eine Webanwendung mit einem App-Store, in dem „Apps“ eigentlich nur Iframes sind, denen bestimmte Abfrageparameter übergeben werden.
Aktuelles Setup:

Code: Select all

# Terminal 1
php artisan serve

# Terminal 2
npm run dev

# Terminal 3
ngrok http 8000

Das Problem:
Beim Zugriff auf die ngrok-URL direkt im Browser funktioniert alles perfekt. Wenn die App jedoch über den iFrame geladen wird, erhalte ich CORS- und Mixed-Content-Fehler:

Code: Select all

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.

Was ich versucht habe:
Einfaches HTTPS mit mkcert
Lokale Zertifikate erstellt: mkcert localhost.
vite.config.ts aktualisiert, um die Zertifikate einzuschließen:

Code: Select all

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

Ergebnis: ERR_BLOCKED_BY_CLIENT-Fehler erhalten, weil der Browser versucht hat, von https://0.0.0.0:5173 zu laden
Laravel-Proxy für Vite:
Proxy-Route in Routes/web.php hinzugefügt:

Code: Select all

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

Ergebnis: Es werden 404-Fehler für bestimmte interne Vite-Module angezeigt:

Code: Select all

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

Wie kann ich Laravel und Vite für die Zusammenarbeit mit HMR konfigurieren?

• Idealerweise möchte ich, dass nur 1 Ngrok-Tunnel ausgeführt wird.
• Das Ausführen von npm run build funktioniert einwandfrei, aber dadurch wird natürlich HMR entfernt.
• Der iFrame befindet sich auf einer anderen Domäne als der Ngrok Tunnel.