CORS

Mechanizm pozwalający stronie kontrolować, które inne domeny mogą pobierać jej zasoby przez przeglądarkę. Łagodzi ograniczenia polityki tego samego pochodzenia.

CORS (Cross-Origin Resource Sharing) to mechanizm bezpieczeństwa wbudowany w przeglądarki, który decyduje, czy kod JavaScript z jednej domeny (origin) może odczytać odpowiedź z zasobu leżącego na innej domenie. Pod spodem CORS rozluźnia w kontrolowany sposób starszą zasadę same-origin policy, która domyślnie zakazuje skryptom czytania danych spoza ich własnego origin. „Origin” to kombinacja schematu, hosta i portu: https://sklep.pl i https://api.sklep.pl to dla przeglądarki dwa różne światy.

Jak to działa

Kluczowa zasada: o tym, czy dostęp jest dozwolony, decyduje serwer przez nagłówki HTTP, a egzekwuje to przeglądarka. Gdy Twój frontend robi fetch() na obcą domenę, serwer w odpowiedzi musi dorzucić nagłówek Access-Control-Allow-Origin. Jeśli go nie ma albo nie pasuje do origin pytającego, przeglądarka zablokuje odczyt odpowiedzi i wyrzuci błąd w konsoli. Co ważne: żądanie często i tak dociera do serwera, a nawet zwraca dane — to przeglądarka chowa je przed JavaScriptem.

Przy żądaniach innych niż „proste” (np. metoda PUT, DELETE albo własne nagłówki) przeglądarka wysyła najpierw zapytanie wstępne metodą OPTIONS, czyli preflight. Serwer odpowiada wtedy nagłówkami Access-Control-Allow-Methods i Access-Control-Allow-Headers, mówiąc „te metody i nagłówki są OK”. Dopiero potem leci właściwe żądanie.

Przykład z praktyki

Klasyk: React na http://localhost:3000 uderza do API na http://localhost:5000. W konsoli widzisz No 'Access-Control-Allow-Origin' header is present. W Node z Express naprawiasz to jednym pakietem: app.use(cors({ origin: 'http://localhost:3000' })). Możesz też podejrzeć nagłówki ręcznie: curl -I -H "Origin: http://localhost:3000" http://localhost:5000/api i sprawdzić, czy w odpowiedzi jest Access-Control-Allow-Origin.

Częste błędy i mity

  • „CORS chroni mój serwer.” Nie. CORS chroni użytkownika przeglądarki, nie backend. curl czy Postman olewają CORS całkowicie — to nie jest zabezpieczenie API przed botem.
  • Wrzucenie Access-Control-Allow-Origin: * na produkcji. Wygodne, ale przy danych wrażliwych ryzykowne, a w połączeniu z Access-Control-Allow-Credentials: true przeglądarka i tak Ci na to nie pozwoli (wildcard + ciasteczka się wykluczają).
  • Mylenie CORS z błędem sieci. Błąd CORS to nie awaria serwera — to świadoma odmowa przeglądarki.

Pojęcia powiązane: same-origin policy, preflight (OPTIONS), nagłówki HTTP, CSRF, JSONP (stary obejściowy hack), proxy odwrotne, REST API.