Cross-Origin Resource Sharing (CORS) to funkcja bezpieczeństwa zaimplementowana przez przeglądarki internetowe w celu ograniczenia żądań stron internetowych do innej domeny niż ta, która obsługiwała stronę internetową. Jego rolą jest poinformowanie przeglądarki, czy klient powinien uzyskać dostęp do żądanych danych.
Serwer decyduje, czy klient jest zaufanym klientem i na tej podstawie ustawia odpowiednie nagłówki. Dzięki tym nagłówkom przeglądarka wie, czy powinna udostępnić dane klientowi (mogą to być dane używane do zastąpienia części strony zawierającej na przykład formularz subskrypcji).
Gdy napotkasz błąd CORS, oznacza to, że strona internetowa próbuje wykonać żądanie XMLHttpRequest, Fetch API lub inny rodzaj żądania HTTP typu cross-origin do domeny innej niż ta, z której pochodzi strona internetowa.
Aby poradzić sobie z błędami CORS, masz wiele opcji, podajemy kilka pomysłów:
1. Konfiguracja po stronie serwera
Włącz CORS na serwerze: Jeśli kontrolujesz serwer, możesz skonfigurować go tak, aby zawierał odpowiednie nagłówki CORS w swoich odpowiedziach. Zazwyczaj robi się to poprzez dodanie nagłówków takich jak
Access-Control-Allow-Origin,Access-Control-Allow-MethodsiAccess-Control-Allow-Headersdo odpowiedzi HTTP.Określanie dozwolonych źródeł: Serwer można skonfigurować tak, aby zezwalał określonym źródłom na dostęp do jego zasobów. Na przykład można ustawić
Access-Control-Allow-Origin:https://example.com, aby zezwolić tylko żądaniom zhttps://example.comna dostęp do zasobów.Obsługa żądań preflight: W niektórych przypadkach przeglądarki wysyłają wstępne żądanie OPTIONS przed wykonaniem rzeczywistego żądania. Powinieneś obsłużyć to żądanie OPTIONS i odpowiedzieć odpowiednimi nagłówkami CORS.
2. Serwer proxy
Skonfiguruj serwer proxy w swojej domenie, który będzie przekazywał żądania do domeny zewnętrznej. W ten sposób frontend wysyła żądania do własnej domeny, unikając problemów z CORS, ponieważ żądania są teraz tego samego pochodzenia.
3. JSONP (JSON z Padding)
Jeśli pobierasz dane, a serwer obsługuje JSONP, możesz użyć żądań JSONP. JSONP działa poprzez dynamiczne dodawanie znacznika skryptu do dokumentu HTML, a serwer odpowiada za pomocą JSON opakowanego w wywołanie funkcji.
4. Rozszerzenia omijające CORS
Możesz użyć rozszerzeń przeglądarki, takich jak "CORS Everywhere" lub "Allow CORS: Access-Control-Allow-Origin", aby tymczasowo wyłączyć ograniczenia CORS podczas programowania lub testowania.
5. Używanie kodu po stronie serwera
Jeśli masz kontrolę nad serwerem, możesz utworzyć kod po stronie serwera, który będzie działał jako serwer proxy. Twój frontend wysyła żądanie do twojego serwera, a twój serwer przekazuje żądanie do domeny zewnętrznej, a następnie zwraca odpowiedź do twojego frontendu.
6. Połączenia WebSocket
Jeśli masz do czynienia z połączeniami WebSocket, kwestie CORS mogą nie mieć zastosowania w taki sam sposób, jak w przypadku tradycyjnych żądań HTTP. Połączenia WebSocket są inicjowane za pomocą uzgadniania i nie mają takich samych ograniczeń.
7. Rozważ alternatywne rozwiązania CORS
W niektórych przypadkach można rozważyć alternatywy, takie jak JSONP, Cross-Origin Embedding (COEP) lub Cross-Origin Opener Policy (COOP), w zależności od konkretnego przypadku użycia i obsługi przeglądarki.
Są to tylko sugestie rozwiązań, sam musisz zweryfikować, czy możesz zastosować któreś z nich.
Potrzebujesz więcej pomocy?
Jeśli masz dodatkowe pytania, związane z blokowaniem skryptów edrone na stronie sklepu, skontaktuj się z nami przez chat lub pod adresem hello@edrone.me