XMLHttpRequest nie może załadować nagłówka 'Access-Control-Allow-Origin'

Question

XMLHttpRequest nie może załadować nagłówka 'Access-Control-Allow-Origin'

Tl;dr; o tej samej Polityce pochodzenia

Mam proces Grunt, który inicjuje instancję express.serwer js. To działało absolutnie dobrze, aż do teraz, kiedy zaczął obsługiwać pustą stronę z następującymi pojawiającymi się w dzienniku błędów w konsoli dewelopera w Chrome (najnowsza wersja): {]}

XMLHttpRequest nie może załadować https://www.example.com/ Nie ma nagłówka 'Access-Control-Allow-Origin' na żądanym zasoby. Pochodzenie " http://localhost:4300 " nie jest zatem dozwolony dostęp.

Co mnie powstrzymuje przed dostępem do strony?

123

javascript same-origin-policy cors

Author: georgeawg, 2016-02-22

Source

10 answers

Serwer docelowy musi zezwalać na żądanie cross-origin. Aby zezwolić na to poprzez express, wystarczy obsłużyć żądanie opcji http:

app.options('/url...', function(req, res, next){
   res.header('Access-Control-Allow-Origin', "*");
   res.header('Access-Control-Allow-Methods', 'POST');
   res.header("Access-Control-Allow-Headers", "accept, content-type");
   res.header("Access-Control-Max-Age", "1728000");
   return res.sendStatus(200);
});

4

Author: Daphoque,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-09 10:45:32

Ponieważ nie jest to wspomniane w zaakceptowanej odpowiedzi.

nie jest to dokładnie to pytanie, ale może pomóc innym, którzy szukają tego problemu
jest to coś, co możesz zrobić w swoim kodzie klienta, aby zapobiec błędom Kors w niektórych przypadkach .

Możesz użyć prostych żądań.
Aby wykonać "proste żądania", żądanie musi spełniać kilka warunków. Np. zezwalając tylko na POST, GET i Metoda HEAD, a także zezwalanie tylko na niektóre podane nagłówki (wszystkie warunki znajdziesz tutaj ).

Jeśli Twój kod klienta nie ustawia nagłówków, których to dotyczy (np." Accept") z wartością fix w żądaniu, może wystąpić, że niektórzy klienci ustawiają te nagłówki automatycznie z "niestandardowymi" wartościami, powodując, że serwer nie zaakceptuje go jako prostego żądania - co spowoduje błąd CORS.

3

Author: zwif,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-18 08:03:31

Dzieje się tak z powodu błędu CORS. CORS oznacza Cross Origin Resource Sharing. W prostych słowach ten błąd występuje, gdy próbujemy uzyskać dostęp do domeny / zasobu z innej domeny.

Przeczytaj więcej na ten temat tutaj: CORS error with jquery

Aby to naprawić, jeśli masz dostęp do innej domeny, musisz zezwolić na dostęp-Control-Allow-Origin na serwerze. Można to dodać do nagłówków. Możesz to włączyć dla wszystkich żądań / domen lub określonego domena.

Jak uzyskać cross-origin resource sharing (CORS) POST request working

Te linki mogą pomóc

2

Author: Vishnu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:02

Ten problem CORS nie był dalej rozwijany (z innych przyczyn).

Mam ten problem obecnie z innego powodu. Mój front end zwraca również błąd nagłówka "Access-Control-Allow-Origin".

Tylko, że wskazałem zły adres URL, więc ten nagłówek nie został prawidłowo odzwierciedlony(w którym nadal zakładam, że tak). localhost (front end) - > wywołanie niezabezpieczonego http (przypuszczalnie https), upewnij się, że punkt końcowy API z front end wskazuje na poprawny protokół.

0

Author: morph85,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-12-17 06:40:45

Mam ten sam błąd w konsoli Chrome.

Mój problem polegał na tym, że próbowałem wejść na stronę używając http:// zamiast https://. Więc nie było nic do naprawienia, po prostu musiałem przejść do tej samej strony za pomocą https.

0

Author: Subhashi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-11 11:02:58

Ten błąd kosztował mnie 2 dni. Sprawdziłem mój dziennik serwera, Prośba/odpowiedź opcji inspekcji wstępnej między przeglądarką Chrome / Edge a serwerem była ok. Głównym powodem jest to, że GET/POST/PUT/DELETE odpowiedź serwera dla XHTMLRequest musi mieć również następujący nagłówek:

access-control-allow-origin: origin

"origin" znajduje się w nagłówku request (przeglądarka doda go do żądania dla Ciebie). na przykład:

Origin: http://localhost:4221

Możesz dodać nagłówek odpowiedzi, jak poniżej, aby zaakceptować dla wszystkich:

access-control-allow-origin: *

Lub nagłówek odpowiedzi dla konkretnego żądania jak:

access-control-allow-origin: http://localhost:4221

Wiadomość w przeglądarkach nie jest jasna do zrozumienia: "...Żądany zasób "

Zauważ, że: CORS działa dobrze dla localhost. inny port oznacza inną domenę. Jeśli pojawi się komunikat o błędzie, sprawdź Cors config po stronie serwera.

0

Author: HungNM2,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-20 02:34:38

" Get "request with appending headers transform to" Options " request. Pojawiają się więc problemy z Polityką Korsarską. Musisz zaimplementować żądanie "Options" na swoim serwerze.

-1

Author: kira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-09 12:51:14

W większości usług mieszkaniowych wystarczy dodać w .htaccess w folderze serwera docelowego to:

Header set Access-Control-Allow-Origin 'https://your.miejscu.folder"

-1

Author: Massimo Pavanel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-03 09:08:30

Powinieneś włączyć CORS, aby go uruchomić.

-8

Author: Perostek Balveda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-17 11:13:49

score 239 · Accepted Answer

TL; dr-jest podsumowanie na końcu i nagłówków w odpowiedzi, aby ułatwić znalezienie odpowiednich części. Czytanie wszystkiego jest jednak zalecane, ponieważ zapewnia przydatne tło do zrozumienia dlaczego , co sprawia, że zobaczenie, jak {35]}Jak {36]} stosuje się w różnych okolicznościach łatwiejsze.

O tej samej Polityce pochodzenia

To jestta sama polityka pochodzenia . Jest to funkcja bezpieczeństwa zaimplementowana przez przeglądarki.

Twój szczególny przypadek to pokazuje, jak jest zaimplementowany dla XMLHttpRequest (i uzyskasz identyczne wyniki, jeśli użyjesz fetch), ale odnosi się również do innych rzeczy (takich jak obrazy załadowane na <canvas> lub dokumenty załadowane do <iframe>), tylko z nieco innymi implementacjami.

(co dziwne, dotyczy to również czcionek CSS, ale dzieje się tak dlatego, że odlewnie found nalegały na DRM, a nie na kwestie bezpieczeństwa, które zwykle obejmuje ta sama polityka pochodzenia).

Standardowy scenariusz, który pokazuje potrzeba SOP może być zademonstrowana za pomocą trzech znaków :

https://www.[website].com/

http://localhost:4300

Alice jest zalogowana na stronie Boba i ma tam pewne poufne dane. Być może jest to firmowy intranet (dostępny tylko dla przeglądarek w sieci LAN) lub jej bankowość internetowa (dostępna tylko za pomocą pliku cookie uzyskanego po wpisaniu nazwy użytkownika i hasło).

Alice odwiedza stronę Mallory, która ma trochę JavaScript, który powoduje, że przeglądarka Alice wysyła żądanie HTTP na stronę Boba (z jej adresu IP z jej ciasteczkami itp.). Może to być tak proste, jak użycie XMLHttpRequest i odczytanie responseText.

Ta sama polityka pochodzenia przeglądarki uniemożliwia JavaScript odczytywanie danych zwracanych przez stronę Boba (do której Bob i Alice nie chcą mieć dostępu Mallory). (Zauważ, że możesz na przykład wyświetlić obraz za pomocą <img> element across origins, ponieważ zawartość obrazu nie jest narażona na działanie JavaScript (lub Mallory) ... chyba że wrzucisz canvas do miksu, w którym to przypadku wygeneruje błąd naruszenia tego samego pochodzenia).

Dlaczego ta sama polityka pochodzenia ma zastosowanie, jeśli uważasz, że nie powinna]}

Dla dowolnego adresu URL możliwe jest, że SOP nie jest potrzebny. Kilka typowych scenariuszy, w których tak jest, to:

Bob podaje całkowicie publiczne informacje

... ale przeglądarka nie ma sposobu, aby dowiedzieć się, czy któreś z powyższych są prawdziwe, więc zaufanie nie jest automatyczne i SOP jest stosowany. Pozwolenie musi być udzielone wyraźnie, zanim przeglądarka przekaże dane, które została podana do innej strony internetowej.

Dlaczego ta sama polityka pochodzenia ma zastosowanie tylko do JavaScript na stronie internetowej

Rozszerzenia przeglądarki *, zakładka sieć w Narzędziach dla programistów przeglądarek i aplikacje takie jak Postman są zainstalowane oprogramowanie. Nie są one przekazywane dane z jednej strony internetowej do JavaScript należącego do innej strony tylko dlatego, że odwiedziłeś tę inną stronę. Instalacja oprogramowania zwykle wymaga bardziej świadomego wyboru.

Nie ma osoby trzeciej (Mallory), która jest uważana za ryzyko.

* rozszerzenia przeglądarki muszą być napisane ostrożnie, aby uniknąć problemów związanych z pochodzeniem. zobacz dokumentację Chrome dla przykład .

Dlaczego możesz wyświetlać dane na stronie bez czytania ich za pomocą JS

Istnieje wiele okoliczności, w których witryna Mallory może spowodować, że przeglądarka pobierze dane od strony trzeciej i wyświetli je (np. dodając element <img> do wyświetlenia obrazu). Jednak JavaScript Mallory nie może odczytać danych w tym zasobie, tylko przeglądarka Alicji i serwer Boba mogą to zrobić, więc nadal jest bezpieczny.

Kors

The Access-Control-Allow-Origin Nagłówek HTTP response, o którym mowa w komunikacie o błędzie, jest częścią standardu CORS, który pozwala Bobowi wyraźnie przyznać zgodę stronie Mallory na dostęp do danych za pośrednictwem przeglądarki Alice.

Podstawowa implementacja obejmowałaby tylko:

Access-Control-Allow-Origin: *

... w nagłówkach odpowiedzi, aby umożliwić dowolnej stronie odczytanie danych.

Access-Control-Allow-Origin: http://example.com/

... umożliwiłoby dostęp do niej tylko określonej stronie, a Bob może dynamicznie generować to na podstawie Origin request nagłówek pozwalający na dostęp do wielu, ale nie wszystkich witryn.

[34]}specyfika tego, jak Bob ustawia nagłówek odpowiedzi, zależy od serwera HTTP Boba i / lub języka programowania po stronie serwera. Istnieje zbiór przewodników dla różnych wspólnych konfiguracji , które mogą pomóc.

Uwaga: Niektóre żądania są złożone i wysyłają preflight opcje żądania, na które serwer będzie musiał odpowiedzieć, zanim przeglądarka wyśle GET / POST/PUT / Whatever request that the JS wants to make. Implementacje KOR, które dodają tylko Access-Control-Allow-Origin do określonych adresów URL, często są przez to potknięte.

Oczywiście przyznanie uprawnień przez CORS jest czymś, co Bob zrobiłby tylko wtedy, gdyby:]}

dane nie były prywatne lub
Mallory był zaufany

Ale ja nie jestem Bobem!

Nie ma standardowego mechanizmu dodawania tego nagłówka, ponieważ musi pochodzi ze strony Boba, której nie kontroluje.

Jeśli Bob uruchamia publiczne API, może istnieć mechanizm włączania CORS (być może poprzez formatowanie żądania w określony sposób lub opcję konfiguracji po zalogowaniu się na stronie portalu programistów dla witryny Boba). To będzie musiał być mechanizm wdrożony przez Bob chociaż. Mallory może przeczytać dokumentację na stronie Boba, aby sprawdzić, czy coś jest dostępne, lub może porozmawiać z Bobem i poprosić go o wdrożenie Kors.

[40]}komunikaty o błędach, które wspominają o "odpowiedzi na inspekcję wstępną" [41]}

Niektóre wnioski o pochodzenie krzyżowe są wstępnie oznaczone .

Dzieje się tak, gdy (z grubsza rzecz biorąc) starasz się złożyć żądanie cross-origin, które:

zawiera dane uwierzytelniające, takie jak pliki cookie
nie można wygenerować za pomocą zwykłego formularza HTML(np. ma niestandardowe nagłówki lub typ zawartości, którego nie można użyć w formularzu enctype).

Jeśli poprawnie robisz coś to wymaga preflight

W takich przypadkach reszta tej odpowiedzi nadal dotyczy , ale musisz również upewnić się, że serwer może nasłuchać żądania inspekcji wstępnej (które będzie OPTIONS (a nie GET, POST lub cokolwiek próbowałeś wysłać) i odpowiedzieć na to odpowiednim nagłówkiem Access-Control-Allow-Origin, ale także Access-Control-Allow-Methods i Access-Control-Allow-Headers, aby umożliwić określone metody HTTP lub nagłówki.

Jeśli przez pomyłkę uruchamiasz inspekcję wstępną

Czasami ludzie popełniają błędy podczas próby konstruowania żądań Ajax, a czasami wywołują one potrzebę inspekcji wstępnej. Jeśli API jest zaprojektowane tak, aby zezwalać na żądania cross-origin, ale nie wymaga niczego, co wymagałoby inspekcji wstępnej, może to przerwać dostęp.

Typowe błędy, które powodują to to:

próbuje umieścić Access-Control-Allow-Origin i inne nagłówki odpowiedzi CORS na żądanie. Te nie należą do żądania, nie robią nic pomocnego (jaki byłby punkt systemu uprawnień, w którym czy mógłbyś udzielić sobie pozwolenia?), i musi pojawić się tylko w odpowiedzi.
próbuje umieścić nagłówek Content-Type: application/json w żądaniu GET, które nie ma ciała żądania do opisania treści (zazwyczaj gdy autor myli Content-Type i Accept).

W każdym z tych przypadków usunięcie dodatkowego nagłówka żądania często wystarczy, aby uniknąć konieczności przeprowadzenia inspekcji wstępnej (co rozwiąże problem podczas komunikacji z interfejsami API obsługującymi proste żądania, ale nie wstępnie zatwierdzone prośby).

Nieprzezroczyste odpowiedzi

Czasami musisz wysłać żądanie HTTP, ale nie musisz czytać odpowiedzi. na przykład, jeśli publikujesz wiadomość dziennika na serwerze w celu nagrania.

Jeśli używasz fetch API (zamiast XMLHttpRequest), możesz skonfigurować go tak, aby nie próbował używać CORS.

Zauważ, że to nie pozwoli Ci zrobić nic, co wymaga CORS zrobić. Nie będziesz w stanie odczytać odpowiedzi. Nie będziesz w stanie zrobić żądanie, które wymaga inspekcji wstępnej.

Pozwoli Ci złożyć proste żądanie, Nie zobaczyć odpowiedzi i nie wypełnić Konsoli programisty komunikatami o błędach.

Jak to zrobić jest wyjaśnione przez Komunikat o błędzie Chrome podany, gdy składasz żądanie za pomocą fetch i nie masz uprawnień do wyświetlania odpowiedzi za pomocą CORS:

Dostęp do fetch at 'https://example.com/ 'from origin' https://example.net 'został zablokowany przez politykę CORS: nie nagłówek' Access-Control-Allow-Origin ' jest obecny na żądanym zasobie. Jeśli nieprzezroczysta odpowiedź służy twoim potrzebom, ustaw tryb żądania NA "no-cors", aby pobrać zasób z wyłączonym CORS.

Tak więc:

fetch("http://example.com", { mode: "no-cors" });

Alternatywy dla Kors

JSONP

Bob może również dostarczyć dane za pomocą hakera, takiego jak JSONP , który jest jak ludzie krzyż pochodzenie Ajax przed CORS przyszedł.

Działa poprzez prezentację danych w postaci programu JavaScript, który wstrzykuje dane do strony Mallory ' ego.

It Mallory Ufa Bobowi, by nie podawał złośliwego kodu.

Zwróć uwagę na wspólny motyw: strona dostarczająca dane musi poinformować przeglądarkę, że witryna trzecia może uzyskać dostęp do danych, które wysyła do przeglądarki.

Ponieważ JSONP działa poprzez dodanie elementu <script> do załadowania danych w postaci programu JavaScript, który wywołuje funkcję już na stronie, próba użycia techniki JSONP na URL, który zwraca JSON zakończy się niepowodzeniem-zazwyczaj z błędem CORB - bo JSON to nie JavaScript.

Przenieś dwa zasoby do jednego źródła

Jeśli dokument HTML, w którym uruchamia się JS, a żądany adres URL znajduje się na tym samym źródle (współdzielący ten sam schemat, nazwę hosta i port), to ta sama polityka pochodzenia domyślnie przyznaje pozwolenie. CORS nie jest potrzebny.

A Proxy

Mallory może pobrać dane za pomocą kodu po stronie serwera (który następnie może przekazać ze swojego serwera do przeglądarki Alicji przez HTTP jako Zwykle).

Będzie albo:

dodaj nagłówki CORS
Konwertuj odpowiedź na JSONP
istnieje na tym samym pochodzeniu co dokument HTML

Ten kod po stronie serwera może być napisany i obsługiwany przez stronę trzecią (taką jak CORS Anywhere). Zwróć uwagę na konsekwencje związane z prywatnością: strona trzecia może monitorować, kto proxy co na swoich serwerach.

Bob nie musiałby udzielać żadnych zezwoleń, żeby do tego doszło.

Nie ma żadnych zabezpieczeń implikacje tutaj, ponieważ to jest tylko między Mallory i Bobem. Nie ma sposobu, aby Bob myślał, że Mallory jest Alice i aby dostarczyć Mallory danych, które powinny być poufne między Alice i Bobem.

W związku z tym Mallory może użyć tej techniki tylko do odczytu publicznych danych. Należy jednak pamiętać, że pobieranie treści z cudzej strony internetowej i wyświetlanie ich na własną rękę może być naruszeniem praw autorskich i otworzyć się na prawne akcja. [143]}pisanie czegoś innego niż aplikacja internetowa

Jak wspomniano w sekcji "dlaczego ta sama polityka pochodzenia dotyczy tylko JavaScript na stronie internetowej", można uniknąć SOP, nie pisząc JavaScript na stronie internetowej.

To nie znaczy, że nie możesz nadal używać JavaScript i HTML, ale możesz rozpowszechniać go za pomocą innego mechanizmu, takiego jak Node-WebKit lub PhoneGap.

Rozszerzenia przeglądarki

Możliwe jest, aby rozszerzenie przeglądarki wstrzykiwało CORS nagłówki w odpowiedzi przed zastosowaniem tej samej polityki pochodzenia.

Mogą być użyteczne dla rozwoju, ale nie są praktyczne dla witryny produkcyjnej(poproszenie każdego użytkownika witryny o zainstalowanie rozszerzenia przeglądarki, które wyłącza funkcję bezpieczeństwa przeglądarki jest nieuzasadnione).

Zwykle działają tylko z prostymi żądaniami (niepowodzenie podczas obsługi żądań opcji inspekcji wstępnej).

Posiadanie odpowiedniego środowiska programistycznego z lokalnym rozwojem serwer to zwykle lepsze podejście.

Inne zagrożenia bezpieczeństwa

Zauważ, że SOP / CORS nie łagodzą XSS, ataki CSRF lub SQL Injection, które muszą być obsługiwane niezależnie.

Podsumowanie

nic nie możesz zrobić w Twoim kodzie po stronie klienta, który umożliwi dostęp CORS do czyjegoś serwera else ' a .
jeśli kontrolujesz serwer, żądanie jest wysyłane do: Dodaj do niego uprawnienia CORS.
jeśli jesteś przyjazny dla osoby, która go kontroluje: poproś ją, aby dodała do niego uprawnienia CORS.
jeśli jest to usługa publiczna:
- przeczytaj ich dokumentację API, aby zobaczyć, co mówią o dostępie do niego za pomocą JavaScript po stronie klienta:
  - mogą obsługiwać JSONP
  - mogą w ogóle nie wspierać dostępu cross-origin z kodu po stronie klienta (może to być celowa decyzja o podstawy bezpieczeństwa, zwłaszcza jeśli musisz przekazać spersonalizowany klucz API w każdym zapytaniu).
- upewnij się, że nie uruchamiasz żądania inspekcji wstępnej, którego nie potrzebujesz. API może przyznawać uprawnienia dla prostych żądań, ale nie wstępnie potwierdzonych.
jeśli żadne z powyższych nie ma zastosowania: poproś przeglądarkę, aby porozmawiała z Twoim serwerem, a następnie poproś serwer, aby pobrał dane z innego serwera i przekazał je dalej. (Istnieją również hostowane przez osoby trzecie usługi, które dołączają nagłówki CORS do publicznie dostępnych zasobów, z których możesz korzystać).