Entwicklungswerkzeuge einrichten

​

Empfohlene Entwicklungswerkzeuge

Diese optionalen Dienste sind für den Betrieb von Overleaf nicht erforderlich, werden aber für Entwicklung, Debugging und Analyse während der lokalen Entwicklung dringend empfohlen.

• Hoppscotch ist ein schlankes API-Testwerkzeug ähnlich wie Postman, jedoch browserbasiert und für die Entwicklung sehr praktisch.
  • Frontend: http://localhost:3000
  • Proxy (zur Umgehung von CORS): http://localhost:9159
• RedisInsight bietet eine grafische Oberfläche zur Untersuchung von Redis-Daten. Die Oberfläche ist erreichbar unter: http://localhost:5540
• Mongo Express ist eine webbasierte Oberfläche für MongoDB. Sie können http://localhost:8081 mit den Zugangsdaten admin:pass aufrufen.

Bitte fügen Sie Folgendes zu Ihrer docker-compose.yml hinzu:

develop/docker-compose.yml

develop/docker-compose.yml

# services: 
  # Overleaf Dev Containers
  # ...
  
  # Add those for your development
  # API debug
  hoppscotch-frontend:
    image: hoppscotch/hoppscotch-frontend:latest
    ports:
      - "3000:3000"

  hoppscotch-proxy:
    image: hoppscotch/proxyscotch:latest
    environment:
      - PORT=9159
    ports:
      - "9159:9159"

  # Redis-insight
  redis-insight:
    image: redislabs/redisinsight:latest
    ports:
      - "5540:5540"
    depends_on:
      - redis
    volumes:
      - ./data/redis-insight:/data

  # mongo-express
  # basicAuth credentials are "admin:pass"
  mongo-express:
    image: mongo-express
    ports:
      - "8081:8081"
    environment:
      ME_CONFIG_MONGODB_SERVER: mongo

​

Hoppscotch einrichten

​

API-Anfragen über einen Proxy

Um Hoppscotch einzurichten, rufen Sie http://localhost:3000 auf und wechseln Sie zum Tab „Settings“. Setzen Sie Proxy auf http://localhost:9159, damit Ihre Debugging-Werkzeuge mit den internen Netzwerken der Container kommunizieren können.

Jetzt können Sie mit http://web:3000/status testen, ob der web-Dienst läuft:

​

CSRF-Probleme

Wenn Sie mit Postman oder anderen Debugging-Werkzeugen eine POST-Anfrage erzeugen, stellen Sie möglicherweise fest, dass die Anmeldung verweigert wird, und zwar mit einem 401-Fehler. Das liegt daran, dass Overleaf durch eine CSRF-Prüfung geschützt ist.

In Ihrer Konsole sehen Sie möglicherweise:

Um dies bei Ihrer Overleaf-Entwicklung zu lösen, müssen Sie Ihr CSRF-Token einrichten. Hier ist die ausführliche Anleitung.

1. Pre-Request hinzufügen

   Fügen Sie den folgenden Code als Pre-Request hinzu

   

   Das Skript lautet wie folgt:

   pm.sendRequest("http://web:3000/dev/csrf", function (err, res) {
       if (err) {
           console.log(err);
           return;
       }
   
       // 1) Save CSRF token (/dev/csrf)
       const token = res.text().trim();
       pw.env.set("csrftoken", token);
       console.log("csrftoken =", token);
   
       const setCookieHeader = (res.headers || []).find(h => h.key?.toLowerCase() === "set-cookie")?.value;
       console.log("set-cookie =", setCookieHeader);
   
       if (!setCookieHeader) return;
   
       const cookiePair = setCookieHeader.split(";")[0].trim(); // overleaf.sid=...
       pw.env.set("cookie_header", cookiePair);
       console.log("cookie_header =", cookiePair);
   });
   
2. Request-Header hinzufügen

   Sie müssen die folgenden Header hinzufügen:

   Header-Name	Header-Wert
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. Mit API-Werkzeugen anmelden

   Jetzt können Sie sich mit Ihrem Benutzernamen und Passwort anmelden.

   {
     "_csrf": "<<csrftoken>>",
     "email": "[e-mail]",
     "password": "xxxxxx"
   }
   

   So sieht die Antwort aus, wenn Sie einen falschen Benutzernamen oder ein falsches Passwort eingeben.