jQuery Academy · Lekcja

AJAX między domenami (CORS/JSONP)

Proszę poznać i stosować techniki wykonywania żądań AJAX między domenami z użyciem JSONP lub konfigurowania nagłówków CORS na serwerze w celu bezpiecznej wymiany danych.

AJAX między domenami (CORS/JSONP) to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

AJAX między domenami: wyzwanie

Gdy witryna próbuje pobrać dane z innej witryny, nazywa się to żądaniem AJAX między domenami. Często jest to problematyczne!

Domyślnie przeglądarki internetowe mają regułę bezpieczeństwa, która uniemożliwia stronie wysyłanie żądań do domeny innej niż ta, z której strona pochodzi. Reguła ta chroni dane użytkownika.

Zrozumienie polityki tego samego pochodzenia

Wspomniana reguła bezpieczeństwa nosi nazwę Same-Origin Policy (SOP). Jest to podstawowa funkcja bezpieczeństwa przeglądarek.

SOP określa, że przeglądarka internetowa pozwala skryptom zawartym na jednej stronie uzyskać dostęp do danych na drugiej stronie tylko wtedy, gdy obie strony mają ten sam origin (domenę, protokół i port).

Przykład: strona z domeny mywebsite.com nie może bezpośrednio pobierać danych z api.anotherdomain.com.

CORS: nowoczesne rozwiązanie

Aby bezpiecznie zezwalać na żądania między domenami, społeczność webowa opracowała mechanizm Cross-Origin Resource Sharing (CORS). Jest to nowoczesny, standardowy sposób obsługi takich żądań.

CORS działa tak, że pozwala serwerowi jednoznacznie poinformować przeglądarkę, że określone inne domeny mogą uzyskiwać dostęp do jego zasobów.

CORS: konfiguracja po stronie serwera

CORS konfiguruje się przede wszystkim na serwerze udostępniającym dane. Serwer wysyła w odpowiedzi specjalne nagłówki HTTP, wskazując dozwolone originy.

Najważniejszym nagłówkiem jest Access-Control-Allow-Origin. Określa on, które domeny mogą uzyskać dostęp do zasobu.

Access-Control-Allow-Origin: * (zezwala dowolnej domenie)
Access-Control-Allow-Origin: https://yourdomain.com (zezwala tylko określonej domenie)

CORS: żądania klienta jQuery

Po stronie klienta (z użyciem jQuery) wysłanie żądania CORS często nie różni się od wysłania zwykłego żądania AJAX, pod warunkiem że serwer został prawidłowo skonfigurowany.

jQuery obsługuje komunikację na poziomie przeglądarki. Wystarczy wskazać w wywołaniu $.ajax() adres URL między domenami.

$.ajax({
  url: "https://api.example.com/data", // Server must allow CORS
  method: "GET",
  success: function(data) {
    console.log("CORS success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("CORS Error:", textStatus, errorThrown);
  }
});

CORS: żądania wstępne (OPTIONS)

W przypadku niektórych „złożonych” żądań CORS przeglądarki wysyłają żądanie wstępne przed wysłaniem właściwego żądania. Jest to dodatkowy etap zabezpieczeń.

Żądanie wstępne używa metody HTTP OPTIONS, aby poprosić serwer o zgodę. Jeśli serwer jej udzieli, przeglądarka wysyła właściwe żądanie (np. PUT, DELETE lub żądanie z niestandardowymi nagłówkami).

JSONP: starsza alternatywa

Zanim mechanizm CORS został powszechnie przyjęty, JSONP (JSON with Padding) był często stosowanym obejściem problemu żądań między domenami, zwłaszcza w przypadku starszych przeglądarek lub interfejsów API.

JSONP omija Same-Origin Policy, sprytnie wykorzystując możliwość przeglądarki do ładowania znaczników <script> z dowolnej domeny.

JSONP: mechanizm działania

JSONP działa w następujący sposób:

Dynamicznie tworzony jest znacznik <script>, a jego atrybutowi src przypisywany jest adres URL między domenami.
Serwer, oczekujący żądania JSONP, umieszcza dane JSON w wywołaniu funkcji (jest to tzw. „padding”).
Przeglądarka wykonuje ten skrypt, wywołując globalnie zdefiniowaną funkcję na stronie i przekazując jej dane jako argument.

JSONP: implementacja w jQuery

jQuery znacznie upraszcza implementację JSONP. Wystarczy określić dataType: "jsonp" w wywołaniu $.ajax().

jQuery automatycznie tworzy dynamiczny znacznik <script>, generuje unikatową nazwę callbacku i wykonuje go po nadejściu odpowiedzi.

$.ajax({
  url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
  dataType: "jsonp",
  success: function(data) {
    console.log("JSONP success:", data);
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error("JSONP Error:", textStatus, errorThrown);
  }
});

CORS a JSONP: najważniejsze różnice

Choć oba mechanizmy rozwiązują problemy komunikacji między domenami, CORS i JSONP mają różne cechy:

CORS: nowoczesny standard, wykorzystuje nagłówki HTTP, jest bezpieczny, obsługuje wszystkie metody HTTP i wymaga konfiguracji po stronie serwera.
JSONP: starsze obejście, wykorzystuje znaczniki <script>, jest mniej bezpieczne, obsługuje tylko żądania GET, działa po stronie klienta i wymaga, aby serwer opakował odpowiedź.

Szybki test: komunikacja między domenami

Które z poniższych stwierdzeń dotyczących żądań AJAX między domenami są PRAWDZIWE?

Powtórzenie: komunikacja między domenami

Dowiedział(a) się Pan/Pani, jak pokonać Same-Origin Policy w przypadku żądań AJAX między domenami!

CORS to nowoczesny, bezpieczny standard oparty na serwerowych nagłówkach HTTP, które określają uprawnienia.
JSONP to starsze i mniej bezpieczne obejście dla żądań GET, wykorzystujące dynamiczne znaczniki <script>.

Zawsze, gdy to możliwe, należy wybierać CORS, ponieważ jest bezpieczniejszy i bardziej elastyczny. JSONP służy głównie systemom starszego typu lub określonym scenariuszom.

Często zadawane pytania

Czy lekcja „AJAX między domenami (CORS/JSONP)” jest bezpłatna?

Tak — pełny tekst „AJAX między domenami (CORS/JSONP)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „AJAX między domenami (CORS/JSONP)”?

Proszę poznać i stosować techniki wykonywania żądań AJAX między domenami z użyciem JSONP lub konfigurowania nagłówków CORS na serwerze w celu bezpiecznej wymiany danych. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „AJAX między domenami (CORS/JSONP)”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do jQuery Academy