Netwerken – HTTP als protocol

In dit labo stuur je zelf requests: eerst met curl, dan met Postman, dan vanuit de browser. Je lokt statuscodes bewust uit in plaats van erop te wachten, je ontwerpt de endpoints van een kleine API, en je sluit af met de fout die elke webontwikkelaar minstens één keer een namiddag kost: CORS. Die los je hier niet alleen op, je bouwt hem eerst zelf na.

Leerstof

Raadpleeg deze secties als je iets wil nalezen:

• HTTP als protocol
• HTTP-methoden
• Statuscodes
• HTTP-headers
• JSON, REST & clientverzoeken
• Cookies, sessions & CORS

Hoe werk je dit labo door?

1. Doe eerst, denk daarna. Vink de stappen af terwijl je ze uitvoert; je voortgang blijft bewaard in je browser.
2. Schrijf je waarneming zelf op voor je met het modelantwoord vergelijkt.
3. De controlevragen zijn af te lezen in je eigen terminal of Network tab.
4. De hulp neemt af. De laatste oefeningen geven geen hints meer.

Twee testservers

• jsonplaceholder.typicode.com doet alsof: je POST krijgt netjes 201 en een id, maar er wordt niets bewaard.
• httpbin.org kaatst je request terug als JSON, inclusief je headers en je body. Ideaal om te zien wat je nu écht verstuurde.

---

Oefening 1 – Je eerste requests met curl

Je begint met lezen: wat verstuurt curl, wat komt er terug, en waar staat wat.

Doe-opdrachtStuur je eerste requests met curl en lees de uitvoer.0 / 5 stappen

1. Voer uit: curl -v https://jsonplaceholder.typicode.com/posts/1.
2. Wijs in de uitvoer aan: de request line, je eigen headers, de statuslijn, de response headers en de body.
3. Voer uit: curl -v https://jsonplaceholder.typicode.com/posts/9999 en vergelijk de statuscode.
4. Vraag enkel de headers op: curl -I https://jsonplaceholder.typicode.com/posts/1.
5. Sla de body op als bestand: curl -o post1.json https://jsonplaceholder.typicode.com/posts/1 en open het.

Vergelijk de twee requests. Wat bleef gelijk, wat veranderde, en wat zegt de tweede statuscode over waar het probleem zit?

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet

1.Welke statuscode geeft `/posts/1` terug?

Wat lees je af?

2.Welke statuscode geeft `/posts/9999` terug?

Wat lees je af?

3.Welk teken staat in `curl -v` vooraan de regels die jij verstuurt?

Wat lees je af?

4.Welke Content-Type staat in de response van jsonplaceholder?

Wat lees je af?

curl op Windows

In PowerShell is curl standaard een alias voor Invoke-WebRequest, dat andere vlaggen gebruikt. Typ daarom altijd curl.exe in plaats van curl, of werk in Git Bash. In cmd en Git Bash werkt curl gewoon.

---

Oefening 2 – Data versturen met POST

Nu stuur je zelf iets mee. Onderweg ontdek je wat er misgaat als de Content-Type-header ontbreekt, en dat is de fout die je later het vaakst zal moeten herkennen.

Doe-opdrachtVerstuur data met een POST, en ontdek wat de Content-Type-header doet.0 / 6 stappen

1. Voer uit: curl -v -X POST https://jsonplaceholder.typicode.com/posts -H "Content-Type: application/json" -d "{\"title\":\"Test\",\"userId\":1}".
2. Noteer de statuscode en zoek in de response het veld dat de server zelf toevoegde.
3. Stuur nu dezelfde body naar https://httpbin.org/post, met de Content-Type-header.
4. Zoek in het antwoord van httpbin het veld json en kijk wat erin staat.
5. Stuur exact dezelfde body nog eens naar httpbin, maar nu zonder de header.
6. Vergelijk opnieuw de velden json, form en data in het antwoord.

Wat veranderde er in het antwoord van httpbin toen je de Content-Type-header wegliet, en waarom is dat belangrijk?

Schrijf eerst zelf op wat je zag.

Welke statuscode gaf jsonplaceholder op je POST, en wat voegde de server toe aan wat je verstuurde?

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet

1.Welke statuscode geeft jsonplaceholder op een geslaagde POST?

Antwoord

2.Met welke curl-flag stuur je een extra header mee?

Antwoord

3.Met welke curl-flag stuur je de body mee?

Antwoord

4.In welk veld van het httpbin-antwoord staat je JSON als de Content-Type klopt?

Antwoord

---

Oefening 3 – Hetzelfde request in Postman

Dezelfde twee requests, andere verpakking. Het doel is dat je na afloop kan zeggen wanneer je welke tool bovenhaalt.

Doe-opdrachtBouw hetzelfde request na in Postman en vergelijk de twee tools.0 / 6 stappen

1. Maak in Postman een nieuw request aan en zet de methode op GET.
2. Vul de URL https://jsonplaceholder.typicode.com/posts/1 in en verstuur.
3. Bekijk onderaan de tabbladen Body, Headers en de statuscode rechtsboven.
4. Maak een tweede request met methode POST naar https://jsonplaceholder.typicode.com/posts.
5. Voeg bij Headers de regel Content-Type: application/json toe.
6. Vul bij Body → raw → JSON dezelfde body in als in de vorige oefening en verstuur.

Noteer twee dingen die je in Postman sneller terugvindt dan in curl, en één ding dat curl juist duidelijker toont.

Schrijf eerst zelf op wat je zag.

---

Oefening 4 – Ontleden in de Network tab

Curl toont je de tekst, DevTools toont je dezelfde informatie in blokken. Je zoekt nu gericht: welk gegeven kwam van jou, en welk van de server?

Doe-opdrachtOntleed een echt request in de Network tab.0 / 7 stappen

1. Open https://jsonplaceholder.typicode.com en open de DevTools op het tabblad Network.
2. Ververs de pagina en zet het filter op Fetch/XHR.
3. Open het tabblad Console en voer uit: fetch('https://jsonplaceholder.typicode.com/users/1').then(r => r.json()).then(console.log).
4. Zoek dat request terug in de Network tab en klik het aan.
5. Noteer uit Headers → General: de methode, de statuscode en de volledige URL.
6. Noteer uit Response Headers: de Content-Type.
7. Bekijk het tabblad Preview en zoek de naam van de gebruiker.

Welke gegevens uit dit request kwamen van jou, en welke van de server? Zet ze in twee kolommen.

Schrijf eerst zelf op wat je zag.

---

Oefening 5 – Statuscodes uitlokken

Wachten tot je toevallig een 401 tegenkomt, duurt lang. httpbin geeft je elke code op verzoek, dus lok ze uit en kijk wat er telkens gebeurt.

Doe-opdrachtLok statuscodes bewust uit in plaats van erop te wachten.0 / 6 stappen

1. Voer uit: curl -i https://httpbin.org/status/204 en kijk naar de body.
2. Voer uit: curl -i https://httpbin.org/redirect/1 en zoek de Location-header.
3. Voer hetzelfde uit met -L erbij: curl -iL https://httpbin.org/redirect/1.
4. Voer uit: curl -i https://httpbin.org/basic-auth/student/geheim.
5. Voer hetzelfde uit met inloggegevens: curl -i -u student:geheim https://httpbin.org/basic-auth/student/geheim.
6. Voer uit: curl -i https://httpbin.org/status/500.

Noteer per commando de statuscode, en zeg telkens waar je zou gaan zoeken als je die code onverwacht kreeg.

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet

1.Welke code krijg je van `httpbin.org/basic-auth/...` zonder inloggegevens?

Statuscode

2.Welke code krijg je van `httpbin.org/redirect/1` zonder de vlag -L?

Statuscode

3.Welke code hoort bij een geslaagd verzoek zonder body?

Statuscode

4.Bij welke categorie ligt het probleem aan de kant van de server? Geef het eerste cijfer.

Statuscode

---

Oefening 6 – De juiste methode kiezen

Acht situaties, vijf methoden. Kies per situatie, en let op het verschil tussen volledig vervangen en gedeeltelijk aanpassen.

1.De lijst met alle bestellingen van een klant tonen

2.Een nieuwe bestelling plaatsen

3.Enkel het e-mailadres van een profiel wijzigen

4.Een volledig profiel vervangen door nieuwe gegevens

5.Een bestelling annuleren en definitief verwijderen

6.De details van product 42 opvragen

7.Een foto toevoegen aan een fotoalbum

8.De volledige tekst van een artikel overschrijven met een nieuwe versie

---

Oefening 7 – Ontwerp zelf een API

Nu zet je methode, pad en statuscode samen. Je ontwerpt de endpoints voor een klein systeem, en controleert je eigen ontwerp op de twee REST-regels.

Scenario: een bibliotheek

Je bouwt de API voor de uitleendienst van een bibliotheek. Dit moet mogelijk zijn:

1. De volledige lijst van boeken opvragen.
2. Eén boek opvragen op basis van zijn id.
3. Een nieuw boek toevoegen aan de collectie.
4. Van één boek enkel het aantal beschikbare exemplaren aanpassen.
5. Een boek definitief uit de collectie verwijderen.
6. De boeken filteren op auteur, in pagina's van twintig.
7. De lopende ontleningen van één lid opvragen.

Doe-opdrachtOntwerp de endpoints van een kleine API.0 / 4 stappen

1. Lees het scenario in de opgave hieronder.
2. Bepaal per handeling de methode, het pad en de verwachte statuscode.
3. Controleer je paden: staan er zelfstandige naamwoorden in, en geen werkwoorden?
4. Controleer je statuscodes: gebruik je 201 na het aanmaken en 204 na het verwijderen?

Schrijf je zeven endpoints uit, telkens als METHODE /pad → statuscode.

Schrijf eerst zelf op wat je zag.

---

Oefening 8 – Een CORS-fout uitlokken

De klassieker. Je lokt de fout uit, en stelt daarna vast dat het request wel degelijk vertrok. Dat inzicht is het halve werk.

Doe-opdrachtLok een CORS-fout uit en stel vast wat er echt gebeurde.0 / 6 stappen

1. Open een willekeurige website en open de DevTools op het tabblad Console.
2. Voer uit: fetch('https://www.google.com').then(r => r.text()) en lees de foutmelding.
3. Ga naar het tabblad Network en zoek dat request terug. Staat het er, en met welke status?
4. Voer nu uit: fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json()).then(console.log).
5. Zoek in de Response Headers van dat tweede request de header die het verschil maakt.
6. Voer tot slot in je terminal uit: curl -s https://www.google.com | head -5.

Het eerste verzoek werd geblokkeerd, maar curl haalde diezelfde pagina probleemloos op. Verklaar dat verschil in eigen woorden.

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet

1.Welke response header bepaalt of je JavaScript de response mag lezen?

Antwoord

2.Welke header voegt de browser zelf toe aan een cross-origin verzoek?

Antwoord

3.Welke methode gebruikt de browser voor een preflight?

Antwoord

4.Uit hoeveel delen bestaat een origin?

Antwoord

---

Oefening 9 – Een CORS-fout oplossen

Twee servers op je eigen laptop volstaan om het probleem na te bouwen, en om het op te lossen aan de kant waar de oplossing hoort.

Gebruik dit als index.html, geopend via Live Server (poort 5500):

<!DOCTYPE html>
<html lang="nl">
  <head><meta charset="utf-8" /><title>CORS-test</title></head>
  <body>
    <h1>CORS-test</h1>
    <script>
      fetch('http://localhost:8000/data.json')
        .then(r => r.json())
        .then(d => console.log('Gelukt:', d))
        .catch(e => console.error('Mislukt:', e));
    </script>
  </body>
</html>

En dit als server.py, voor de tweede helft van de oefening:

from http.server import SimpleHTTPRequestHandler, HTTPServer

class CorsHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
        super().end_headers()

HTTPServer(('127.0.0.1', 8000), CorsHandler).serve_forever()

Doe-opdrachtLos een CORS-fout op aan de kant waar de oplossing hoort: de server.0 / 8 stappen

1. Maak een map met daarin een bestand data.json met bijvoorbeeld {"boodschap": "hallo"}.
2. Start in die map: python -m http.server 8000.
3. Maak daarnaast een index.html met een script dat http://localhost:8000/data.json ophaalt met fetch().
4. Open die index.html via Live Server (dus op poort 5500) en bekijk de console: je krijgt een CORS-fout.
5. Leg uit waarom: welk deel van de origin verschilt hier?
6. Stop de server en start hem opnieuw met het scriptje uit de opgave, dat de header wel meestuurt.
7. Ververs je pagina. De data verschijnt nu in je console.
8. Bekijk in de Network tab de response headers van beide pogingen en vergelijk.

Beide servers draaiden op jouw eigen machine. Waarom was dit toch cross-origin, en wat loste het precies op?

Schrijf eerst zelf op wat je zag.

Wat je nooit doet

Een browserextensie installeren die CORS uitschakelt, of Chrome starten met --disable-web-security. Het probleem verdwijnt dan enkel op jouw machine: je bezoekers krijgen de fout gewoon. Bovendien zet je daarmee de beveiliging uit voor élke site die je daarna bezoekt.

---

Uitdaging – De grote request-zoektocht

Geen stappenplan en geen modelantwoorden meer: kies zelf je tool per vraag. Noteer per vondst welke tool je gebruikte en hoe je aan het antwoord kwam.

Doe-opdrachtZoek zelf, met curl, Postman of DevTools. Vink af wat je gevonden hebt.0 / 8 stappen

1. De statuscode van een DELETE naar https://jsonplaceholder.typicode.com/posts/1.
2. De Content-Type van de response van https://jsonplaceholder.typicode.com/posts.
3. Het aantal posts in die lijst.
4. Een response met een Cache-Control-header, en de waarde ervan.
5. Een request dat een 301 of 302 teruggeeft, met de Location erbij.
6. Een API die JSON teruggeeft en waarvan Access-Control-Allow-Origin op * staat.
7. Het verschil tussen PUT en PATCH op /posts/1, aangetoond met twee requests.
8. Een request waarbij je met -u inlogt en zo van 401 naar 200 gaat.

Denk tot slot na over deze vragen:

• Punt 7: wat verschilt er in de response tussen je PUT en je PATCH, en wat zou er in een echte API met je ontbrekende velden gebeurd zijn?
• Welke tool bleek voor jou het handigst: curl, Postman of de Network tab? Verantwoord je keuze met een voorbeeld uit dit labo.