CORS-tester

Volgende

CORS-fouten zijn het “klassieke” rood in de browserconsole: u roept een API van een andere origin aan en de browser blokkeert de respons. Deze tester verstuurt een preflight-OPTIONS-verzoek naar elke URL die u plakt, met de origin en methode van uw keuze, en decodeert vervolgens de Access-Control-*-headers, zodat u precies ziet wat de server toestaat, wat hij blokkeert en waarom de browser klaagt.

CORS testen

  1. 1

    Voer de doel-URL in

    Het API-endpoint dat u vanaf uw front-end wilt aanroepen. Vermeld de querystring en het protocol.

  2. 2

    Stel de methode en origin in

    GET/POST/PUT/DELETE/PATCH. De origin kan de URL van uw site zijn of elke origin die u wilt simuleren.

  3. 3

    De preflight begrijpen

    De tester verstuurt altijd een OPTIONS-verzoek met de door u gekozen origin en methode, plus de header Access-Control-Request-Headers: Content-Type, precies de preflight die een browser voor een JSON-verzoek verstuurt.

  4. 4

    Voer de test uit

    De tester verstuurt de preflight en rapporteert de HTTP-status plus de CORS-responsheaders: Allow-Origin, Allow-Methods, Allow-Headers, Allow-Credentials en Max-Age.

  5. 5

    Herstel de verkeerde configuratie

    Het rapport markeert wat ontbreekt of fout is, ontbrekende Allow-Origin, verboden header, niet-toegestane methode.

De headers die ertoe doen

Header Wat het doet
Access-Control-Allow-Origin Welke origins de respons mogen lezen
Access-Control-Allow-Methods Preflight: welke methoden zijn toegestaan
Access-Control-Allow-Headers Preflight: welke verzoekheaders zijn toegestaan
Access-Control-Allow-Credentials Of cookies/authenticatie zijn toegestaan
Access-Control-Expose-Headers Welke responsheaders JS mag lezen
Access-Control-Max-Age Hoelang het preflight-resultaat wordt gecachet

Eenvoudige vs. preflight-verzoeken

Een verzoek is “eenvoudig” (geen preflight) alleen als al het volgende waar is:

  • De methode is GET, HEAD of POST.
  • De headers beperken zich tot Accept, Accept-Language, Content-Language, Content-Type (met specifieke waarden).
  • Content-Type, indien aanwezig, is application/x-www-form-urlencoded, multipart/form-data of text/plain.

Al het andere, een JSON-body, een Authorization-header, een eigen X-Foo-header, een PUT/DELETE/PATCH, activeert een preflight OPTIONS. Servers moeten de preflight beantwoorden met de juiste Allow-*-headers, anders wordt het echte verzoek nooit verstuurd.

Veelvoorkomende CORS-fouten

  • “No Access-Control-Allow-Origin header” → de server stelt de header niet in. Los dit op aan de serverkant, niet aan de clientkant.
  • “Credentials mode requires Allow-Origin not to be *” → als u cookies verstuurt, moet Allow-Origin een specifieke origin zijn (of de Origin-header terugkaatsen).
  • “Request header X not allowed” → voeg X toe aan Access-Control-Allow-Headers in de preflight-respons.
  • “Method not allowed” → voeg de methode toe aan Access-Control-Allow-Methods.
  • “Redirect not allowed in preflight” → een preflight kan geen redirects volgen. Het OPTIONS-endpoint moet rechtstreeks reageren.

Allow-Origin: * vs. de Origin terugkaatsen

Access-Control-Allow-Origin: * is ruimhartig, maar kan niet worden gecombineerd met credentials. Kaats in productie de Origin van het verzoek terug (na validatie tegen een allowlist) en stel Allow-Credentials: true in als u cookies nodig hebt.

Een proxy als tijdelijke oplossing

Als u geen controle over de server hebt, verwijdert een dunne proxy op uw eigen domein CORS volledig, de browser ziet het als same-origin. Veel hostingplatformen (Vercel, Netlify, Cloudflare) bieden precies hiervoor rewrite-regels.

Veelgestelde vragen

Om te voorkomen dat een kwaadaardige pagina privégegevens van een andere site leest met behulp van de cookies van uw browser. Zonder CORS zou een bezoek aan evil.com die site de interne API van uw bank kunnen laten aanroepen alsof u het bent. CORS dwingt de bank om cross-origin-leesacties expliciet toe te staan.

Alleen tijdens ontwikkeling. Chromium heeft een --disable-web-security-flag, maar die raakt alle sites en is gevaarlijk. De juiste oplossing is headers aan de serverkant of een proxy.

Postman is geen browser, het negeert CORS volledig. CORS wordt alleen door browsers afgedwongen voor JavaScript-verzoeken. Een server die in Postman werkt, is niet automatisch CORS-correct.

Afbeeldingen en klassieke <script>-tags laden cross-origin zonder CORS, maar JS kan hun inhoud niet lezen. <img crossorigin> en fetch() dwingen CORS wél af, en daarom worden op een canvas getekende afbeeldingen zonder CORS “tainted” (besmet).

Gerelateerde tools