W tym artykule
Czym jest CORS?
Cross-Origin Resource Sharing (CORS) to mechanizm bezpieczenstwa przegladarki kontrolujacy, ktore zrodla webowe moga uzyskac dostep do zasobow na twoim serwerze. Domyslnie przegladarki wymuszaja polityke tego samego zrodla, blokujac zadania JavaScript do innej domeny, portu lub protokolu.
Naglowki CORS informuja przegladarke, ktore zadania miedzy zrodlami sa dozwolone. Bez prawidlowych naglowkow wywolania API z frontendu na jednej domenie do backendu na innej zakoncza sie bledem CORS. Generator naglowkow CORS tworzy prawidlowe naglowki Access-Control-Allow-*.
Jak dzialaja naglowki CORS
CORS dziala poprzez zestaw naglowkow odpowiedzi HTTP, ktore serwer wysyla, aby wskazac, ktore zrodla, metody i naglowki sa dozwolone.
- Access-Control-Allow-Origin — okresla, ktore zrodla moga uzyskac dostep do zasobu (konkretna domena lub * dla dowolnego zrodla)
- Zadania preflight — dla zlozon ych zadan przegladarka najpierw wysyla zadanie OPTIONS, aby sprawdzic, czy faktyczne zadanie jest dozwolone
- Obsluga danych uwierzytelniajacych — Access-Control-Allow-Credentials: true umozliwia cookies i naglowki autoryzacji, ale wymaga konkretnego zrodla
Wypróbuj za darmo — bez rejestracji
Wygeneruj naglowki CORS →Kiedy konfigurowac CORS
Konfiguracja CORS jest wymagana, gdy frontend i backend sa serwowane z roznych zrodel.
- Rozwoj API — API REST lub GraphQL dostepne z aplikacji frontendowych na roznych domenach wymagaja naglowkow CORS
- Konfiguracja CDN — serwowanie statycznych zasobow z poddomeny CDN wymaga CORS dla plikow czcionek i zadan API
- Mikroserwisy — uslugi dzialajace na roznych portach podczas lokalnego rozwoju wymagaja CORS do komunikacji przez przegladarke
Czesto zadawane pytania
Dlaczego nie moge po prostu uzyc Access-Control-Allow-Origin: * dla wszystkiego?
Znak wieloznaczny * pozwala na dowolne zrodlo, co jest odpowiednie dla publicznych API. Jednak nie moze byc uzywany z danymi uwierzytelniajacymi (cookies, naglowki Authorization). Jesli API wymaga uwierzytelnienia, nalezy podac dokladne zrodlo.
Czym jest zadanie preflight?
Preflight to zadanie HTTP OPTIONS, ktore przegladarka automatycznie wysyla przed faktycznym zadaniem. Sprawdza, czy serwer zezwala na metode, naglowki i zrodlo.
Jak naprawic blad 'No Access-Control-Allow-Origin header'?
Dodaj naglowek Access-Control-Allow-Origin do odpowiedzi serwera z domena zrodla zadajacego. Dla Express uzyj middleware cors, dla Nginx dodaj dyrektywy add_header.