Vite-Proxy: direkt Appwrite, längere Timeouts gegen 504

Proxy-Ziel appwrite.webklar.com, 120s Timeout und 504-Hinweise in LOCAL_DEV.md.

Co-authored-by: Cursor <cursoragent@cursor.com>

.env.example

@@ -1,14 +1,14 @@
 # Kopieren nach .env.local (wird nicht von Git versioniert):
 #   cp .env.example .env.local
 #
-# Lokal mit Vite-Proxy (empfohlen <20> Session-Cookies wie auf dem Server):
+# Lokal mit Vite-Proxy (empfohlen <20> Session-Cookies wie auf dem Server):
 VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1
 VITE_APPWRITE_PROJECT_ID=6a1058610003c5a13a05
 VITE_APPWRITE_DATABASE_ID=woms-database
 VITE_APPWRITE_BUCKET_ID=woms-attachments
 
-# Optional: anderes Proxy-Ziel (Standard: https://ticket.webklar.com)
+# Optional: Proxy-Ziel (Standard: https://appwrite.webklar.com)
-# VITE_APPWRITE_PROXY_TARGET=https://ticket.webklar.com
+# VITE_APPWRITE_PROXY_TARGET=https://appwrite.webklar.com
 
 # Produktion / Build (ohne Vite-Proxy):
 # VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1

LOCAL_DEV.md

@@ -7,15 +7,15 @@
 | App-URL | `https://ticket.webklar.com` | `http://localhost:5173` |
 | API-URL | `https://ticket.webklar.com/v1` (nginx-Proxy) | oft `https://ticket.webklar.com/v1` direkt |
 | **Gleiche Origin?** | Ja | **Nein** (Cross-Origin) |
-| Session-Cookie | `domain=.ticket.webklar.com` | Browser speichert Cookie **nicht** f<>r localhost |
+| Session-Cookie | `domain=.ticket.webklar.com` | Browser speichert Cookie **nicht** f<>r localhost |
 
-Auf dem Server leitet nginx `/v1/` an Appwrite weiter und schreibt Cookies auf `ticket.webklar.com` um. Die React-App und die API sind **dieselbe Site** <20> Login funktioniert.
+Auf dem Server leitet nginx `/v1/` an Appwrite weiter und schreibt Cookies auf `ticket.webklar.com` um. Die React-App und die API sind **dieselbe Site** <20> Login funktioniert.
 
-Lokal ruft der Browser die API auf einer **anderen Domain** auf. Appwrite setzt Cookies f<>r `.ticket.webklar.com`. Die werden bei Requests von `localhost:5173` **nicht mitgeschickt** ? `guests missing scopes`, Login scheint tot.
+Lokal ruft der Browser die API auf einer **anderen Domain** auf. Appwrite setzt Cookies f<>r `.ticket.webklar.com`. Die werden bei Requests von `localhost:5173` **nicht mitgeschickt** ? `guests missing scopes`, Login scheint tot.
 
-CORS f<>r `http://localhost:5173` ist auf dem Server erlaubt <20> das reicht allein nicht f<>r HttpOnly-Session-Cookies.
+CORS f<>r `http://localhost:5173` ist auf dem Server erlaubt <20> das reicht allein nicht f<>r HttpOnly-Session-Cookies.
 
-## L<>sung: Vite-Proxy + `.env.local`
+## L<>sung: Vite-Proxy + `.env.local`
 
 1. Datei anlegen (nicht in Git):
 
@@ -39,17 +39,39 @@ CORS f
    npm run dev
    ```
 
-`vite.config.js` leitet `/v1` an `https://ticket.webklar.com` weiter und schreibt Cookie-Domains auf `localhost` um <20> Verhalten wie nginx auf dem Server.
+`vite.config.js` leitet `/v1` an `https://ticket.webklar.com` weiter und schreibt Cookie-Domains auf `localhost` um <20> Verhalten wie nginx auf dem Server.
+
+## Fehler: <20>Failed to load resource<63> / **504** in der Konsole
+
+Typisch bei `VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1`: Der Vite-Proxy erreicht Appwrite nicht rechtzeitig.
+
+1. **Neuesten Code holen** (`git pull`) <20> Proxy zeigt jetzt direkt auf `appwrite.webklar.com` mit l<>ngerem Timeout.
+2. Dev-Server **komplett stoppen** (Strg+C) und neu starten: `npm run dev`
+3. In `.env.local` pr<70>fen:
+   ```env
+   VITE_APPWRITE_ENDPOINT=http://localhost:5173/v1
+   ```
+4. Im Browser **Network**-Tab: Welche URL liefert 504?
+   - `http://localhost:5173/v1/...` ? Proxy/Netzwerk (Firewall, VPN, Server nicht erreichbar)
+   - `https://ticket.webklar.com/v1/...` ? ohne Proxy; Endpoint in `.env.local` auf `localhost:5173` stellen
+5. Test im Terminal (ersetzt 5173 durch deinen Vite-Port):
+   ```bash
+   curl -sS -o /dev/null -w "%{http_code}\n" http://localhost:5173/v1/health \
+     -H "X-Appwrite-Project: 6a1058610003c5a13a05"
+   ```
+   Erwartung: **401** (nicht 504) <20> dann ist der Proxy ok.
+
+**Notfall ohne Proxy:** In `.env.local` tempor<6F>r `VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1` <20> Login-Cookies funktionieren lokal dann oft nicht, aber du siehst ob der Server erreichbar ist.
 
 ## Checkliste bei Problemen
 
-- [ ] `.env.local` existiert (`.env` allein reicht; Vite l<>dt `.env.local` mit h<>herer Priorit<69>t)
+- [ ] `.env.local` existiert (`.env` allein reicht; Vite l<>dt `.env.local` mit h<>herer Priorit<69>t)
 - [ ] Endpoint ist `http://localhost:5173/v1`, **nicht** `https://appwrite.webklar.com/v1` (altes Projekt)
 - [ ] Nach Login: DevTools ? Application ? Cookies ? `localhost` ? `a_session_6a1058610003c5a13a05`
 - [ ] Appwrite Console ? Projekt **Ticket-System** ? Platforms ? `localhost` eingetragen
 
 ## Git / Deploy
 
-- `.env` und `.env.local` sind in `.gitignore` <20> jeder Entwickler braucht eigene `.env.local`
+- `.env` und `.env.local` sind in `.gitignore` <20> jeder Entwickler braucht eigene `.env.local`
 - Server-Build nutzt Container-Env (`VITE_APPWRITE_ENDPOINT=https://ticket.webklar.com/v1`)
 - Push nach Gitea deployt nur den **Frontend-Code**, nicht deine lokale `.env.local`

vite.config.js

@@ -3,18 +3,34 @@ import react from '@vitejs/plugin-react'
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
-  const apiTarget = env.VITE_APPWRITE_PROXY_TARGET || 'https://ticket.webklar.com'
+  // Direkt zu Appwrite (ein Hop weniger als ticket.webklar.com → nginx → Appwrite)
+  const apiTarget =
+    env.VITE_APPWRITE_PROXY_TARGET || 'https://appwrite.webklar.com'
 
   return {
     plugins: [react()],
     server: {
       proxy: {
-        // Lokal: Appwrite über gleiche Origin wie die App (wie nginx auf dem Server)
         '/v1': {
           target: apiTarget,
           changeOrigin: true,
           secure: true,
+          timeout: 120_000,
+          proxyTimeout: 120_000,
           cookieDomainRewrite: 'localhost',
+          configure: (proxy) => {
+            proxy.on('error', (err, req, res) => {
+              console.error('[vite proxy /v1]', err.message)
+              if (res && !res.headersSent) {
+                res.writeHead(502, { 'Content-Type': 'application/json' })
+                res.end(
+                  JSON.stringify({
+                    message: `Proxy-Fehler: ${err.message}. Ist ${apiTarget} erreichbar?`,
+                  })
+                )
+              }
+            })
+          },
         },
       },
     },