Cookies, sessions & CORS
Stateless karakter, cookies & sessions
HTTP is stateless: elk request staat volledig op zichzelf. De server bewaart geen geheugen tussen twee requests van dezelfde client — zelfs niet als ze een fractie van een seconde na elkaar binnenkomen.
Toch blijf je "ingelogd" wanneer je van pagina naar pagina navigeert. Dat komt door twee mechanismen die bovenop het stateless protocol gebouwd zijn:
- Cookie — een klein stukje data dat de server aan de browser meegeeft. De browser stuurt die cookie automatisch mee bij elk volgend request naar diezelfde server.
- Session — een periode waarin de server jou herkent, meestal doordat de cookie een sessie-ID bevat dat de server aan jouw gegevens koppelt.
Deze les behandelt cookies en sessions op conceptueel niveau: waarom ze nodig zijn, niet hoe je ze zelf implementeert in code.
CORS & Same-Origin Policy
Een origin bestaat uit drie onderdelen: protocol, domein en poort.
https://app.example.com:443
↑ ↑ ↑
protocol domein poort
Twee URL's hebben enkel dezelfde origin als alle drie identiek zijn.
De Same-Origin Policy is een beveiligingsregel van de browser: JavaScript op de ene origin mag standaard geen data lezen van een andere origin. Dit voorkomt dat een kwaadaardige website in het geheim data van een andere site (bv. je bank) zou kunnen uitlezen.
CORS (Cross-Origin Resource Sharing) is de uitzondering op die regel: een server kan expliciet toestemming geven aan (bepaalde) andere origins om de response te lezen, via de header:
Access-Control-Allow-Origin: *
- Ontbreekt deze header → de browser blokkeert de response, ook al is het request wel degelijk uitgevoerd.
- Is de header aanwezig → de browser staat toe dat JavaScript de response leest.
Open de console (F12) op een willekeurige pagina en voer uit:
fetch('https://www.google.com').then(r => r.text())
Je krijgt een CORS-fout: Google stuurt geen Access-Control-Allow-Origin-header mee. Probeer nu:
fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json())
Dit werkt wél — zoek in de Network tab de Access-Control-Allow-Origin-header op in de response.
Samenvatting
| Begrip | Kern |
|---|---|
| Request | Method, URL, headers, body |
| Response | Statuscode, headers, body |
GET / POST / PUT / PATCH / DELETE / HEAD | Opvragen / aanmaken / vervangen / gedeeltelijk aanpassen / verwijderen / enkel headers |
| Safe / idempotent | GET & HEAD passen niets aan; GET, HEAD, PUT & DELETE geven altijd hetzelfde eindresultaat |
| 1xx / 2xx / 3xx / 4xx / 5xx | Info / OK / redirect / clientfout / serverfout |
| Headers | Sleutel-waardeparen met metadata, bv. Content-Type, Authorization, Set-Cookie |
| JSON & REST | Standaardformaat voor API-bodies + resource-gebaseerde URL's met CRUD-methoden |
| Stateless | Geen geheugen tussen requests |
| Cookie & session | Simuleren van "ingelogd blijven" |
| Origin | Protocol + domein + poort |
| CORS | Server geeft expliciet toestemming aan andere origins |