In dit artikel
Wat is CORS?
Cross-Origin Resource Sharing (CORS) is een browserbeveiligingsmechanisme dat bepaalt welke weborigines toegang hebben tot resources op uw server. Standaard handhaven browsers het same-origin beleid, waardoor JavaScript-verzoeken naar een ander domein, poort of protocol worden geblokkeerd.
CORS-headers vertellen de browser welke cross-origin verzoeken zijn toegestaan. Zonder de juiste headers zullen API-aanroepen van een frontend op het ene domein naar een backend op een ander domein mislukken met een CORS-fout. Een CORS-headergenerator maakt de juiste Access-Control-Allow-* headers.
Hoe CORS-headers werken
CORS werkt via een set HTTP-responsheaders die de server verstuurt om aan te geven welke origines, methoden en headers zijn toegestaan.
- Access-Control-Allow-Origin — specificeert welke origines toegang hebben tot de resource (een specifiek domein of * voor elke oorsprong)
- Preflight-verzoeken — voor niet-eenvoudige verzoeken stuurt de browser eerst een OPTIONS-verzoek om te controleren of het daadwerkelijke verzoek is toegestaan
- Afhandeling van credentials — Access-Control-Allow-Credentials: true staat cookies en auth-headers toe, maar vereist een specifieke oorsprong
Probeer gratis — geen aanmelding vereist
Genereer CORS-headers →Wanneer CORS configureren
CORS-configuratie is vereist wanneer uw frontend en backend vanaf verschillende origines worden geserveerd.
- API-ontwikkeling — REST- of GraphQL-API's die worden benaderd door frontend-apps op andere domeinen hebben CORS-headers nodig
- CDN-configuratie — het serveren van statische assets vanaf een CDN-subdomein vereist CORS voor lettertype-bestanden en API-verzoeken
- Microservices — services die op verschillende poorten draaien tijdens lokale ontwikkeling hebben CORS nodig om via de browser te communiceren
Veelgestelde vragen
Waarom kan ik niet gewoon Access-Control-Allow-Origin: * voor alles gebruiken?
De wildcard * staat elke oorsprong toe, wat prima is voor publieke API's. Het kan echter niet worden gebruikt met credentials (cookies, Authorization-headers). Als uw API authenticatie vereist, moet u de exacte oorsprong opgeven.
Wat is een preflight-verzoek?
Een preflight is een HTTP OPTIONS-verzoek dat de browser automatisch voor het daadwerkelijke verzoek verstuurt. Het controleert of de server de methode, headers en oorsprong toestaat.
Hoe los ik de fout 'No Access-Control-Allow-Origin header' op?
Voeg de Access-Control-Allow-Origin header toe aan de respons van uw server met het domein van de verzoekende oorsprong. Voor Express gebruik de cors-middleware, voor Nginx voeg add_header-richtlijnen toe.