Configurare gli strumenti di sviluppo

​

Strumenti di sviluppo consigliati

Questi servizi opzionali non sono necessari per eseguire Overleaf, ma sono vivamente consigliati per lo sviluppo, il debug e l’ispezione durante lo sviluppo in locale.

• Hoppscotch è uno strumento leggero per il test delle API simile a Postman, ma basato sul browser e molto comodo per lo sviluppo.
  • Frontend: http://localhost:3000
  • Proxy (per aggirare CORS): http://localhost:9159
• RedisInsight offre un’interfaccia visuale per ispezionare i dati di Redis. Interfaccia disponibile su: http://localhost:5540
• Mongo Express è un’interfaccia web per MongoDB. Puoi visitare http://localhost:8081 con le credenziali admin:pass

Aggiungi quanto segue al tuo docker-compose.yml:

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

​

Configurare Hoppscotch

​

Richieste API tramite proxy

Per configurare Hoppscotch, visita http://localhost:3000 e vai alla scheda delle impostazioni. Devi impostare Proxy su http://localhost:9159, in modo che i tuoi strumenti di debug possano interagire con le reti interne dei container.

Ora puoi fare una prova con http://web:3000/status per verificare che il servizio web sia attivo:

​

Problemi con CSRF

Se usi Postman o altri strumenti di debug per generare una richiesta POST, potresti notare che il login viene rifiutato con un errore 401. Questo accade perché Overleaf è protetto dalla verifica CSRF.

Nella console potresti vedere:

Per gestire questo problema durante lo sviluppo di Overleaf, devi configurare il token CSRF. Ecco il tutorial dettagliato.

1. Aggiungere una Pre-Request

   Aggiungi il seguente codice nella sezione Pre-Request

   

   Lo script è il seguente:

   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. Aggiungere gli header della richiesta

   Devi aggiungere i seguenti header:

   Nome header	Valore header
   Content-Type	application/json
   X-Csrf-Token	<<csrftoken>>
   Cookie	<<cookie_header>>

   
3. Effettuare il login con gli strumenti API

   Ora puoi effettuare il login con il tuo nome utente e la tua password.

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

   Ecco la risposta che ottieni se inserisci un nome utente o una password errati.