CORS-testare

Nästa

CORS-fel är det “klassiska” röda i webbläsarkonsolen: du anropar ett API från ett annat ursprung och webbläsaren blockerar svaret. Den här testaren skickar en preflight-OPTIONS-begäran till valfri URL du klistrar in, med det ursprung och den metod du väljer, och avkodar sedan Access-Control-*-rubrikerna så att du ser exakt vad servern tillåter, vad den blockerar och varför webbläsaren klagar.

Så testar du CORS

  1. 1

    Ange mål-URL:en

    API-slutpunkten du vill anropa från din frontend. Ta med frågesträng och protokoll.

  2. 2

    Ställ in metod och ursprung (origin)

    GET/POST/PUT/DELETE/PATCH. Ursprunget kan vara din webbplats URL eller vilket ursprung du vill simulera.

  3. 3

    Förstå preflighten

    Testaren skickar alltid en OPTIONS-begäran med ditt valda ursprung och metod, plus rubriken Access-Control-Request-Headers: Content-Type, exakt den preflight som en webbläsare skickar före en JSON-begäran.

  4. 4

    Kör testet

    Testaren skickar preflighten och rapporterar HTTP-statusen plus CORS-svarsrubrikerna: Allow-Origin, Allow-Methods, Allow-Headers, Allow-Credentials och Max-Age.

  5. 5

    Åtgärda felkonfigurationen

    Rapporten flaggar vad som saknas eller är fel, saknad Allow-Origin, förbjuden rubrik, otillåten metod.

Rubrikerna som spelar roll

Rubrik Vad den gör
Access-Control-Allow-Origin Vilka ursprung som får läsa svaret
Access-Control-Allow-Methods Preflight: vilka metoder som tillåts
Access-Control-Allow-Headers Preflight: vilka begäranrubriker som tillåts
Access-Control-Allow-Credentials Om cookies/autentisering tillåts
Access-Control-Expose-Headers Vilka svarsrubriker JS får läsa
Access-Control-Max-Age Hur länge preflight-resultatet cachas

Enkla vs. preflight-begäranden

En begäran är “enkel” (ingen preflight) endast om allt detta gäller:

  • Metoden är GET, HEAD eller POST.
  • Rubrikerna begränsas till Accept, Accept-Language, Content-Language, Content-Type (med specifika värden).
  • Content-Type, om den finns, är application/x-www-form-urlencoded, multipart/form-data eller text/plain.

Allt annat, en JSON-kropp, en Authorization-rubrik, en egen X-Foo-rubrik, en PUT/DELETE/PATCH, utlöser en preflight OPTIONS. Servern måste svara på preflighten med rätt Allow-*-rubriker, annars skickas den faktiska begäran aldrig.

Vanliga CORS-fel

  • “No Access-Control-Allow-Origin header” → servern sätter inte rubriken. Åtgärda på servern, inte på klienten.
  • “Credentials mode requires Allow-Origin not to be *” → om du skickar cookies måste Allow-Origin vara ett specifikt ursprung (eller spegla tillbaka Origin-rubriken).
  • “Request header X not allowed” → lägg till X i Access-Control-Allow-Headers i preflight-svaret.
  • “Method not allowed” → lägg till metoden i Access-Control-Allow-Methods.
  • “Redirect not allowed in preflight” → en preflight kan inte följa omdirigeringar. OPTIONS-slutpunkten måste svara direkt.

Allow-Origin: * vs. att spegla Origin

Access-Control-Allow-Origin: * är tillåtande men kan inte kombineras med autentiseringsuppgifter. I produktion: spegla tillbaka Origin från begäran (efter validering mot en tillåtelselista) och sätt Allow-Credentials: true om du behöver cookies.

Proxy som lösning

Om du inte kan styra servern tar en tunn proxy på din egen domän bort CORS helt, webbläsaren ser det som same-origin. Många hostningsplattformar (Vercel, Netlify, Cloudflare) erbjuder omskrivningsregler (rewrite) för precis detta.

Vanliga frågor

För att hindra en skadlig sida från att läsa privata uppgifter på en annan webbplats med hjälp av din webbläsares cookies. Utan CORS skulle ett besök på evil.com kunna låta den anropa din banks interna API som om det vore du. CORS tvingar banken att uttryckligen tillåta cross-origin-läsningar.

Endast under utveckling. Chromium har flaggan --disable-web-security, men den påverkar alla webbplatser och är farlig. Den rätta lösningen är rubriker på serversidan eller en proxy.

Postman är inte en webbläsare, den ignorerar CORS helt. CORS tillämpas endast av webbläsare för JavaScript-begäranden. En server som fungerar i Postman är inte automatiskt CORS-korrekt.

Bilder och klassiska <script>-taggar laddas cross-origin utan CORS, men JS kan inte läsa deras innehåll. <img crossorigin> och fetch() tillämpar däremot CORS, och det är därför canvas-ritade bilder blir “förorenade” (tainted) utan det.

Relaterade verktyg