Cross-Origin Resource Sharing (CORS)
Implementeer CORS-beleid in Nginx om veilige cross-domeinaanvragen voor uw API's mogelijk te maken.
Cross-Origin Resource Sharing (CORS) is een gratis API-gateway en reverse proxy (Nginx + Spring Cloud Gateway)-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject API-gateway en reverse proxy (Nginx + Spring Cloud Gateway). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) bevat in totaal 4 lessen.
Wat is CORS?
Stel je voor dat je een webapplicatie bouwt. Je frontend, bijvoorbeeld een React-app, draait op app.example.com, maar moet gegevens ophalen uit je API die op api.example.com draait.
Daar komt Cross-Origin Resource Sharing (CORS) om de hoek kijken. Dit is een beveiligingsfunctie die door webbrowsers wordt geïmplementeerd om te bepalen hoe webpagina's van de ene origin bronnen van een andere origin mogen opvragen.
Het Same-Origin Policy-beleid
CORS is een versoepeling van het Same-Origin Policy-beleid van de browser. Dit beleid is een belangrijk beveiligingsmechanisme dat voorkomt dat een schadelijke website gevoelige gegevens van een andere site leest.
- Origin wordt bepaald door het protocol, de host en de poort.
https://app.example.com:443verschilt vanhttp://app.example.com:80en vanhttps://api.example.com:443.
Zonder CORS zouden browsers je frontend blokkeren wanneer deze met je API probeert te communiceren, omdat ze verschillende origins hebben.
Hoe CORS werkt
Wanneer je browser een aanvraag naar een andere origin detecteert, voegt deze een Origin-header aan de aanvraag toe. De server moet vervolgens reageren met specifieke CORS-headers om de browser te laten weten dat de aanvraag is toegestaan.
De belangrijkste header is Access-Control-Allow-Origin. Als deze header in het antwoord van de server staat en de waarde overeenkomt met de origin van de client, of * is, staat de browser de aanvraag toe.
Eenvoudige versus preflight-aanvragen
CORS-aanvragen kunnen in twee typen worden ingedeeld:
- Eenvoudige aanvragen: dit zijn rechtstreekse GET-, HEAD- of POST-aanvragen met specifieke inhoudstypen, zoals
text/plain. De browser verstuurt ze onmiddellijk en verwacht CORS-headers in het antwoord. - Preflight-aanvragen: bij complexere aanvragen, zoals PUT, DELETE, aangepaste headers of specifieke inhoudstypen, verstuurt de browser eerst een
OPTIONS-aanvraag. Deze 'preflight' controleert bij de server of de daadwerkelijke aanvraag veilig kan worden verstuurd.
Nginx voor CORS-headers
Omdat Nginx vaak fungeert als reverse proxy of API-gateway, is het een geschikte plek om CORS-headers voor je backendservices te beheren. We kunnen Nginx-directives gebruiken om de benodigde Access-Control-*-headers aan antwoorden toe te voegen.
De belangrijkste directive hiervoor is add_header. Hiermee kunnen we aangepaste HTTP-headers aan Nginx-antwoorden toevoegen.
Allow-Origin configureren
We configureren Nginx om aanvragen vanaf een specifieke origin, https://app.example.com, naar je API toe te staan.
We voegen de header Access-Control-Allow-Origin toe binnen een location-blok dat je API-aanvragen afhandelt.
server {
listen 80;
server_name api.example.com;
location /api/ {
add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
proxy_pass http://backend_api_service;
}
}Meerdere origins afhandelen
Wat doe je als meerdere frontends toegang tot je API nodig hebben? Je kunt niet rechtstreeks meerdere origins in Access-Control-Allow-Origin opgeven. In plaats daarvan kun je de Nginx-directive map gebruiken om de header dynamisch in te stellen op basis van de binnenkomende Origin-header.
http {
map $http_origin $cors_origin {
default "";
"https://app.example.com" "https://app.example.com";
"https://dev.example.com" "https://dev.example.com";
}
server {
listen 80;
server_name api.example.com;
location /api/ {
if ($cors_origin ~ ".") {
add_header 'Access-Control-Allow-Origin' $cors_origin;
}
proxy_pass http://backend_api_service;
}
}
}Preflight-aanvragen configureren
Bij preflight-aanvragen (OPTIONS) verwacht de browser specifieke headers als antwoord op zijn OPTIONS-aanroep. Nginx moet deze aanvragen onderscheppen en antwoorden met de juiste CORS-headers, vaak zonder de aanvraag naar de backend door te sturen.
server {
listen 80;
server_name api.example.com;
location /api/ {
# Handle preflight OPTIONS requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
# For actual requests
add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
proxy_pass http://backend_api_service;
}
}Essentiële CORS-headers
Naast Access-Control-Allow-Origin zijn deze headers essentieel voor volledige CORS-ondersteuning:
Access-Control-Allow-Methods: Geeft aan welke HTTP-methoden zijn toegestaan (bijvoorbeeldGET, POST, PUT).Access-Control-Allow-Headers: Vermeldt welke headers de client mag versturen (bijvoorbeeldContent-Type, Authorization).Access-Control-Allow-Credentials: Stel deze in optrueals de client cookies of HTTP-verificatie mag versturen.Access-Control-Max-Age: Geeft aan hoelang de preflightreactie door de browser in de cache mag worden opgeslagen (in seconden).
Uitgebreide CORS-configuratie
Hier ziet u een completer configuratiefragment voor Nginx dat zowel eenvoudige als preflight-CORS-verzoeken afhandelt. Zo kan een specifieke oorsprong met uw API communiceren, ook wanneer er inloggegevens worden meegestuurd.
server {
listen 80;
server_name api.example.com;
location /api/ {
set $cors_origin "https://app.example.com"; # Or use map directive
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' "$cors_origin";
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
add_header 'Access-Control-Allow-Origin' "$cors_origin";
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
proxy_pass http://backend_api_service;
}
}CORS-header controleren
Welke van de volgende headers zijn essentieel om Nginx correct te laten reageren op een CORS-preflightverzoek (OPTIONS)?
Samenvatting: Nginx en CORS
In deze les heeft u geleerd wat Cross-Origin Resource Sharing (CORS) is en waarom het belangrijk is voor veilige webtoepassingen. We hebben het volgende behandeld:
- Het Same-Origin Policy-beleid en waarom CORS bestaat.
- Het verschil tussen eenvoudige en preflightverzoeken.
- Hoe u Nginx configureert met de richtlijnen
add_headerenmapom CORS te beheren. - Belangrijke CORS-headers, zoals
Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-HeadersenAccess-Control-Max-Age.
Met een juiste CORS-configuratie in Nginx kunnen uw frontendtoepassingen veilig communiceren met uw backend-API's op verschillende domeinen.
Leer API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Cross-Origin Resource Sharing (CORS)” gratis?
Ja — de volledige tekst van “Cross-Origin Resource Sharing (CORS)” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) bevat in totaal 4 lessen.
Wat leer ik in “Cross-Origin Resource Sharing (CORS)”?
Implementeer CORS-beleid in Nginx om veilige cross-domeinaanvragen voor uw API's mogelijk te maken. Je oefent met API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) te beginnen?
Ervaring vooraf is niet nodig. API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Cross-Origin Resource Sharing (CORS)”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over API-gateway en reverse proxy (Nginx + Spring Cloud Gateway)?
Ja. Elke les over API-gateway en reverse proxy (Nginx + Spring Cloud Gateway) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- API-versioning met Nginx
- Cross-Origin Resource Sharing (CORS)
- Rate limiting en throttling met Nginx
- Op paden gebaseerde routing naar microservices