Wat is CORS?

CORS (Cross-Origin Resource Sharing) — een mechanisme waarmee webpagina's bronnen kunnen aanvragen vanaf een ander domein, poort of protocol dan waar de pagina zelf is geladen. Dit wordt gedaan met behulp van extra HTTP-headers.

Standaard passen browsers het Same-Origin Policy (SOP) toe, die scripts op één pagina verbiedt toegang tot gegevens van een andere bron (domein, poort, protocol). CORS versoepelt dit beleid op gecontroleerde wijze, waardoor de server expliciet kan aangeven welke cross-domein verzoeken toegestaan zijn.

Hoe werkt CORS:

Eenvoudig verzoek: Als het verzoek aan bepaalde criteria voldoet (bijvoorbeeld, gebruik van de GET- of POST-methode, alleen bepaalde headers toegestaan), stuurt de browser het verzoek direct met een extra Origin header die de bron van het verzoek aangeeft. De server kan op deze header reageren met Access-Control-Allow-Origin die de toegestane bron aangeeft.
Preflight: Voor "niet-eenvoudige" verzoeken (bijvoorbeeld met PUT, DELETE methoden, of met aangepaste headers), stuurt de browser eerst een preflight-verzoek (OPTIONS). Dit vraagt de server of het hoofdverzoek toegestaan is. De server reageert met headers die de toegestane methoden, headers en bronnen aangeven. Als de preflight slaagt, stuurt de browser het daadwerkelijke verzoek.

Belangrijke CORS-headers:

Origin: Verstuurt door de browser in het verzoek, geeft de bron (domein, poort, protocol) van de pagina die het verzoek initieert.
Access-Control-Allow-Origin: Verstuurt door de server in de reactie, geeft de bron aan die de reactie mag ontvangen. Kan een specifiek domein, * (elke bron), of dynamisch worden gegenereerd op basis van de Origin header.
Access-Control-Allow-Methods: Verstuurt door de server in reactie op de preflight, geeft de toegestane HTTP-methoden aan (GET, POST, PUT, DELETE, etc.).
Access-Control-Allow-Headers: Verstuurt door de server in reactie op de preflight, geeft de toegestane headers aan.
Access-Control-Allow-Credentials: Verstuurt door de server in de reactie, geeft aan of cookies en andere inloggegevens toegestaan zijn in het verzoek.

Voorbeeld van server-antwoorden die verzoeken toestaan vanaf https://example.com:

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

CORS is essentieel voor het correct functioneren van veel webapplicaties die cross-domain AJAX-verzoeken gebruiken, zoals API-interactie, font-laden, gebruik van Web Fonts met CDN, enz. Correcte CORS-configuratie op de server is cruciaal voor de veiligheid en functionaliteit van de applicatie.