# CORS-Test für Passkey Cross-Device Authentication

## Test-Datei verwenden

1. **Öffne die Test-Seite:**
   ```
   https://harheimertc.tsschulz.de/test-cors.html
   ```

2. **Führe die Tests aus:**
   - Klicke auf "Test OPTIONS Request" - sollte Status 204 zurückgeben
   - Klicke auf "Test POST Request" - sollte Status 200 zurückgeben
   - Klicke auf "Test /api/auth/register-passkey-options" - sollte Options zurückgeben

3. **Prüfe die Browser-Entwicklertools:**
   - Öffne F12 → Network Tab
   - Führe die Tests aus
   - Klicke auf jeden Request und prüfe die **Response Headers**:
     - `Access-Control-Allow-Origin` sollte `https://harheimertc.tsschulz.de` sein
     - `Access-Control-Allow-Credentials` sollte `true` sein
     - `Access-Control-Allow-Methods` sollte `GET, POST, OPTIONS` enthalten

## Manueller Test mit curl

### OPTIONS Preflight Test:
```bash
curl -X OPTIONS \
  -H "Origin: https://harheimertc.tsschulz.de" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type" \
  -v \
  https://harheimertc.tsschulz.de/api/auth/register-passkey-options
```

**Erwartete Response:**
- Status: 204 No Content
- Header: `Access-Control-Allow-Origin: https://harheimertc.tsschulz.de`
- Header: `Access-Control-Allow-Credentials: true`

### POST Request Test:
```bash
curl -X POST \
  -H "Origin: https://harheimertc.tsschulz.de" \
  -H "Content-Type: application/json" \
  -d '{"name":"Test","email":"test@example.com"}' \
  -v \
  https://harheimertc.tsschulz.de/api/auth/register-passkey-options
```

**Erwartete Response:**
- Status: 200 OK
- Header: `Access-Control-Allow-Origin: https://harheimertc.tsschulz.de`
- Body: JSON mit `success: true` und `options` Objekt

## Browser Console Test

Öffne die Browser-Konsole (F12) und führe aus:

```javascript
// Test 1: OPTIONS Preflight
fetch('https://harheimertc.tsschulz.de/api/auth/register-passkey-options', {
  method: 'OPTIONS',
  headers: {
    'Origin': window.location.origin,
    'Access-Control-Request-Method': 'POST',
    'Access-Control-Request-Headers': 'Content-Type'
  }
}).then(r => {
  console.log('OPTIONS Status:', r.status);
  console.log('CORS Headers:', {
    origin: r.headers.get('Access-Control-Allow-Origin'),
    credentials: r.headers.get('Access-Control-Allow-Credentials'),
    methods: r.headers.get('Access-Control-Allow-Methods')
  });
});

// Test 2: POST Request
fetch('https://harheimertc.tsschulz.de/api/auth/register-passkey-options', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Origin': window.location.origin
  },
  body: JSON.stringify({
    name: 'Test User',
    email: 'test@example.com'
  })
}).then(r => r.json()).then(data => {
  console.log('POST Response:', data);
  console.log('Has Options:', !!data.options);
  console.log('Has Challenge:', !!data.options?.challenge);
});
```

## Was zu prüfen ist:

1. **OPTIONS Request:**
   - Status sollte 204 sein (nicht 200 oder 404)
   - CORS-Header müssen vorhanden sein

2. **POST Request:**
   - Status sollte 200 sein
   - CORS-Header müssen vorhanden sein
   - Response sollte `success: true` und `options` enthalten

3. **Cross-Device Problem:**
   - Wenn CORS korrekt ist, aber Cross-Device trotzdem nicht funktioniert:
     - Prüfe, ob der QR-Code die richtige Origin enthält
     - Prüfe, ob das Smartphone die gleiche Origin erreichen kann
     - Prüfe die Browser-Logs auf dem Smartphone (falls möglich)

## Häufige Probleme:

1. **Apache überschreibt CORS-Header:**
   - Lösung: In Apache-Config sicherstellen, dass CORS-Header nicht überschrieben werden

2. **OPTIONS gibt 404 zurück:**
   - Lösung: Endpoint muss OPTIONS-Requests explizit behandeln

3. **CORS-Header fehlen:**
   - Lösung: Server-Endpoint muss CORS-Header setzen

4. **Origin-Mismatch:**
   - Lösung: `WEBAUTHN_ORIGIN` muss exakt mit der Browser-Origin übereinstimmen