Ga naar hoofdinhoud

Labo 7 — HTTP als protocol

In dit labo oefen je met HTTP-requests via curl, Postman en de DevTools Network tab. Je werkt met de publieke testapi jsonplaceholder.typicode.com.

Leerstof

Raadpleeg deze sectie als je iets wil nalezen:

Oefening 1 — Je eerste GET-request​

  1. Open een terminal (Git Bash op Windows, Terminal op macOS/Linux).
  2. Stuur een GET-request naar https://jsonplaceholder.typicode.com/posts/1 met curl -v.
  3. Wijs in de uitvoer aan: de request line, de request headers, de statuscode en de response body.
  4. Stuur nu een GET-request naar een post die niet bestaat: https://jsonplaceholder.typicode.com/posts/9999.
  5. Welke statuscode krijg je terug? In welke categorie (2xx/3xx/4xx/5xx) zit die?

Oefening 2 — Een POST-request sturen​

  1. Stuur een POST-request naar https://jsonplaceholder.typicode.com/posts met als body: 
    {"title": "Mijn eerste post", "body": "Dit is een test.", "userId": 1}
  2. Welke statuscode krijg je terug? Klopt die met wat je verwacht van een POST die iets aanmaakt?
  3. Vergelijk de body die je stuurde met de body die je terugkreeg. Wat is er toegevoegd?
  4. Stuur dezelfde request nogmaals, maar zonder de Content-Type: application/json header. Wat verandert er in de response?

Oefening 3 — Dezelfde requests in Postman​

  1. Herhaal de GET-request uit Oefening 1 in Postman.
  2. Herhaal de POST-request uit Oefening 2 in Postman.
  3. Vergelijk voor beide requests: methode, statuscode, request headers, response headers en body.
  4. Noteer minstens twee dingen die je in Postman makkelijker terugvindt dan in de ruwe curl-uitvoer, en minstens één ding dat curl juist duidelijker toont.

Oefening 4 — De DevTools Network tab​

  1. Open https://jsonplaceholder.typicode.com in je browser en open de DevTools (F12) → tabblad Network.
  2. Ververs de pagina en klik het eerste document-request aan.
  3. Doorloop de tabbladen Headers, Response en Timing. Noteer per tabblad welke informatie je er vindt.
  4. Open de console (tabblad Console) en voer uit: 
    fetch('https://jsonplaceholder.typicode.com/users/1').then(r => r.json()).then(console.log)
  5. Zoek dit request terug in de Network tab. Welke methode, statuscode en response headers zie je?

Oefening 5 — De juiste HTTP-methode kiezen​

Voor elk scenario: kies GET, POST, PUT of DELETE en motiveer in één zin.

  1. Een gebruiker bekijkt de lijst van zijn bestellingen.
  2. Een gebruiker plaatst een nieuwe bestelling.
  3. Een gebruiker wijzigt zijn volledige verzendadres.
  4. Een gebruiker annuleert en verwijdert een bestelling.
  5. Een pagina laadt de details van één specifiek product.
  6. Een gebruiker vervangt zijn volledige profiel (naam, e-mail, adres) door nieuwe gegevens.

Oefening 6 — Statuscodes diagnosticeren​

Voor elke statuscode: geef de categorie (2xx/3xx/4xx/5xx) en beschrijf in één zin waar je het probleem zou zoeken (bij jouw request, of bij de server).

  1. 200 OK
  2. 201 Created
  3. 301 Moved Permanently
  4. 400 Bad Request
  5. 401 Unauthorized
  6. 404 Not Found
  7. 500 Internal Server Error
  8. 503 Service Unavailable

Oefening 7 — CORS-fout uitlokken en oplossen​

  1. Open de console (F12) op een willekeurige webpagina.
  2. Voer uit: 
    fetch('https://www.google.com').then(r => r.text())
  3. Lees de foutmelding in de console. Welke header wordt genoemd? Wat zegt de foutmelding letterlijk?
  4. Voer nu uit: 
    fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json()).then(console.log)
  5. Dit werkt wél. Zoek in de Network tab de response headers van dit request op en noteer de waarde van Access-Control-Allow-Origin.
  6. Verklaar in twee tot drie zinnen: waarom blokkeert de browser het eerste fetch()-verzoek, maar niet het tweede? Wie beslist dit — de browser of de server?
Let op

Het fetch()-verzoek naar Google wordt wel degelijk uitgevoerd — de server antwoordt gewoon. De browser blokkeert enkel dat jouw JavaScript-code de response mag lezen.

Oefening 8 — Een PATCH-request sturen​

  1. Stuur een PATCH-request naar https://jsonplaceholder.typicode.com/posts/1 met als body: 
    {"title": "Enkel de titel gewijzigd"}
  2. Vergelijk de response met die van Oefening 2 (POST) en met wat een PUT zou doen. Welke velden staan er in de response, en wat zegt dat over het verschil tussen PATCH en PUT?

Oefening 9 — Meerdere headers meesturen​

  1. Stuur een POST-request naar https://jsonplaceholder.typicode.com/posts met twee headers: Content-Type: application/json én Accept: application/json, en dezelfde body als in Oefening 2.
  2. Welke curl-flag gebruik je om een tweede header toe te voegen?

Oefening 10 — Formulierdata versturen (application/x-www-form-urlencoded)​

  1. Stuur een POST-request naar https://httpbin.org/post met header Content-Type: application/x-www-form-urlencoded en body naam=Robin&les=3.
  2. Zoek in de JSON-response van httpbin het veld "form" op. Staan je gegevens daar correct in?
  3. Vergelijk deze aanpak met het versturen van een JSON-body: wat verschilt er in de header en in de manier waarop je de body opbouwt?

Oefening 11 — Een response opslaan als bestand​

  1. Stuur een GET-request naar https://jsonplaceholder.typicode.com/posts en sla de response-body op als posts.json in plaats van ze te printen.
  2. Welke curl-flag gebruik je hiervoor? Controleer met ls -lh posts.json dat het bestand is aangemaakt.

Oefening 12 — Een bestand uploaden​

  1. Maak een klein testbestand aan: echo "Dit is een testbestand" > testbestand.txt.
  2. Upload dat bestand als multipart/form-data naar https://httpbin.org/post.
  3. Zoek in de JSON-response het veld "files" op. Staat de inhoud van je bestand erin?

Oefening 13 — URL-gecodeerde query-parameters​

  1. Vraag de comments bij post 1 op (https://jsonplaceholder.typicode.com/comments) via een query-parameter postId=1, maar gebruik nu curl's ingebouwde URL-encoding in plaats van de parameter zelf in de URL te typen.
  2. Vergelijk het resultaat met het manueel toevoegen van ?postId=1 aan de URL. Zijn ze identiek? In welke situatie is de ingebouwde encoding veiliger?

Uitdaging — Request-zoektocht​

Los onderstaande opdrachten op met curl, Postman of de DevTools Network tab — kies zelf je tool per vraag.

  1. Welke statuscode krijg je als je een DELETE-request stuurt naar https://jsonplaceholder.typicode.com/posts/1?
  2. Welke Content-Type-header staat in de response van een GET-request naar /posts?
  3. Hoeveel posts staan er in totaal in https://jsonplaceholder.typicode.com/posts (tip: tel de JSON-array)?
  4. Wat is de statuscode wanneer je een PUT-request stuurt naar /posts/1 met een lege body?
  5. Welke HTTP-versie staat vermeld in de request line wanneer je curl gebruikt?
  6. Zoek een Cache-Control-header op in een response van jsonplaceholder. Bij welk request vond je die?

Schrijf per vraag op welke tool je gebruikte en hoe je aan het antwoord kwam.