Najwyraźniej zupełnie nie zrozumiałem jego semantyki. Myślałem o czymś takim:
- Klient pobiera kod javascript MyCode.js z
http://siteA
- źródła . - Nagłówek odpowiedzi MyCode.js zawiera Access-Control-Allow-Origin:
http://siteB
co, jak sądzę, oznacza, że MyCode.js może tworzyć odniesienia do witryny B. - Klient uruchamia niektóre funkcje MyCode.js, które z kolei wysyłają żądania do
http://siteB
, co powinno być w porządku, mimo że są żądaniami pochodzącymi z różnych źródeł.
Cóż, mylę się. To wcale tak nie działa. Przeczytałem Udostępnianie zasobów pochodzących z różnych źródeł i próbowałem przeczytać Udostępnianie zasobów pochodzących z różnych źródeł w zaleceniu w3c
Jedno jest pewne - nadal nie rozumiem, jak mam korzystać z tego nagłówka.
Mam pełną kontrolę zarówno nad witryną A, jak i witryną B. Jak włączyć kod javascript pobrany z witryny A, aby uzyskać dostęp do zasobów w witrynie B za pomocą tego nagłówka?
PS
Nie chcę korzystać z JSONP.
javascript
cross-domain
cors
znak
źródło
źródło
http://siteA/MyCode.js
.Odpowiedzi:
Access-Control-Allow-Origin
to nagłówek CORS (Cross-Origin Resource Sharing) .Gdy witryna A próbuje pobrać treść z witryny B, witryna B może wysłać
Access-Control-Allow-Origin
nagłówek odpowiedzi, aby poinformować przeglądarkę, że zawartość tej strony jest dostępna dla niektórych źródeł. ( Pochodzenie to domena oraz schemat i numer portu ). Domyślnie strony witryny B nie są dostępne dla żadnego innego źródła ; użycieAccess-Control-Allow-Origin
nagłówka otwiera drzwi do dostępu między źródłami według określonych żądań pochodzenia.Dla każdego zasobu / strony, którą Witryna B chce udostępnić dla Witryny A, Witryna B powinna wyświetlać swoje strony z nagłówkiem odpowiedzi:
Nowoczesne przeglądarki nie będą blokować żądań między domenami. Jeśli witryna A zażąda strony z witryny B, przeglądarka faktycznie pobierze żądaną stronę na poziomie sieci i sprawdzi, czy nagłówki odpowiedzi wskazują witrynę A jako dozwoloną domenę żądającego. Jeśli strony B nie wskazał, że strony A jest dostęp do tej strony, przeglądarka wywoła
XMLHttpRequest
„serror
zdarzenie i zaprzeczyć danych odpowiedzi do żądającego kodu JavaScript.Nie proste prośby
To, co dzieje się na poziomie sieci, może być nieco bardziej skomplikowane niż wyjaśniono powyżej. Jeśli żądanie to „niełatwym” , przeglądarka najpierw wysyła żądanie OPCJI „bez kontroli danych”, aby sprawdzić, czy serwer zaakceptuje żądanie. Żądanie nie jest proste, gdy (lub oba):
Accept
Accept-Language
Content-Language
Content-Type
(jest to tylko prosta, gdy jego wartość jestapplication/x-www-form-urlencoded
,multipart/form-data
lubtext/plain
)Jeśli serwer odpowie na inspekcję wstępną OPCJE za pomocą odpowiednich nagłówków odpowiedzi (w
Access-Control-Allow-Headers
przypadku nieprostych nagłówków,Access-Control-Allow-Methods
w przypadku czasowników niebędących prostymi), które pasują do nie-prostych czasowników i / lub nie-prostych nagłówków, przeglądarka wysyła rzeczywiste żądanie.Przypuśćmy, że strona A chce wysłać żądanie podniesiony
/somePage
, z non-prosteContent-Type
wartościapplication/json
, przeglądarka musi najpierw wysłać żądanie inspekcji wstępnej:Pamiętaj, że
Access-Control-Request-Method
iAccess-Control-Request-Headers
są automatycznie dodawane przez przeglądarkę; nie musisz ich dodawać. Ta inspekcja wstępna OPCJE uzyskuje nagłówki udanej odpowiedzi:Podczas wysyłania rzeczywistego żądania (po zakończeniu inspekcji wstępnej) zachowanie jest identyczne jak w przypadku obsługi prostego żądania. Innymi słowy, niełatwe żądanie, którego inspekcja wstępna zakończy się powodzeniem, jest traktowane tak samo jak proste żądanie (tzn. Serwer musi nadal wysłać
Access-Control-Allow-Origin
ponownie w celu uzyskania rzeczywistej odpowiedzi).Przeglądarki wysyłają aktualne żądanie:
A serwer odsyła
Access-Control-Allow-Origin
, tak jak w przypadku prostego żądania:Zobacz Zrozumienie XMLHttpRequest nad CORS, aby uzyskać więcej informacji na temat nieprostych żądań.
źródło
Access-Control-Allow-Origin
nagłówka, ale może nie zapewniać odpowiedzi na kod JS w witrynie A, jeśli nagłówek nie zezwala na to, aby witryna A. (PS Dzięki :))Access-Control-Allow-Origin
nie akceptuje*
niektórych przeglądarek (FF i Chrome AFAIK). W takim przypadku musisz podać wartość zOrigin
nagłówka. Mam nadzieję, że to komuś pomoże.Udostępnianie zasobów między różnymi źródłami -
CORS
(żądanie AJAX między domenami AKA) to problem, z którym większość programistów internetowych może się spotkać, zgodnie z zasadami tego samego pochodzenia, przeglądarki ograniczają JavaScript klienta w bezpiecznym obszarze izolowanym, zwykle JS nie może bezpośrednio komunikować się ze zdalnym serwerem z innej domeny. W przeszłości programiści tworzyli wiele trudnych sposobów realizacji żądania zasobów między domenami, najczęściej za pomocą następujących sposobów:Te trudne sposoby mają mniej lub bardziej pewne problemy, na przykład JSONP może spowodować lukę w zabezpieczeniach, jeśli programiści po prostu go „ewaluują”, a powyżej 3, chociaż działa, obie domeny powinny zbudować między sobą ścisłą umowę, nie jest ani elastyczny, ani elegancki MOIM ZDANIEM:)
Firma W3C wprowadziła wspólne udostępnianie zasobów (CORS) jako standardowe rozwiązanie zapewniające bezpieczny, elastyczny i zalecany standardowy sposób rozwiązania tego problemu.
Mechanizm
Z wysokiego poziomu możemy po prostu uznać, że CORS jest umową między wywołaniem klienta AJAX z domeny A a stroną hostowaną w domenie B, typowe żądanie / odpowiedź między źródłami to:
Domeny AJAX nagłówki żądań
Nagłówki odpowiedzi DomainB
Niebieskie części, które zaznaczyłem powyżej, to fakty kernalne: „Nagłówek żądania pochodzenia” wskazuje, skąd pochodzi żądanie krzyżowania pochodzenia lub żądania kontroli wstępnej ”, nagłówek odpowiedzi„ Kontrola dostępu - zezwól na pochodzenie ”wskazuje, że ta strona zezwala na zdalne żądanie z Domena A (jeśli wartość * wskazuje, zezwala na zdalne żądania z dowolnej domeny).
Jak wspomniałem powyżej, W3 zaleca przeglądarce, aby wdrożyła „ żądanie inspekcji wstępnej ” przed przesłaniem faktycznie żądania HTTP Cross-Origin, w skrócie jest to
OPTIONS
żądanie HTTP :Jeśli foo.aspx obsługuje OPCJE czasownik HTTP, może zwrócić odpowiedź jak poniżej:
Tylko jeśli odpowiedź zawiera „Kontrola dostępu - Zezwalaj na pochodzenie” ORAZ jej wartość to „*” lub zawiera domenę, która przesłała żądanie CORS, spełniając ten warunek mandatu, przeglądarka prześle rzeczywiste żądanie między domenami i buforuje wynik w „ Pamięć podręczna wyników inspekcji wstępnej ”.
Napisałem o CORS trzy lata temu: żądanie HTTP AJAX Cross-Origin
źródło
Pytanie jest trochę za stare, aby odpowiedzieć, ale zamieszczam je w celu odniesienia do tego pytania w przyszłości.
Zgodnie z tym artykułem Mozilla Developer Network:
Strona HTML podawane
http://domain-a.com
sprawia<img>
wniosek src dlahttp://domain-b.com/image.jpg
.Wiele stron w Internecie ładuje dziś zasoby, takie jak arkusze stylów CSS , obrazy i skrypty z oddzielnych domen (dlatego powinno być fajnie).
Polityka tego samego pochodzenia
Ze względów bezpieczeństwa przeglądarki ograniczają żądania HTTP pochodzące z różnych źródeł inicjowane z poziomu skryptów .
Na przykład
XMLHttpRequest
iFetch
przestrzegaj zasad tego samego pochodzenia .Tak więc aplikacja internetowa korzystająca z żądań HTTP
XMLHttpRequest
lubFetch
tylko do własnej domeny .Udostępnianie zasobów między źródłami (CORS)
Aby ulepszyć aplikacje internetowe, programiści poprosili dostawców przeglądarek o zezwolenie na żądania między domenami.
Mechanizm współdzielenia zasobów między źródłami (CORS) zapewnia serwerom internetowym kontrolę dostępu między domenami , które umożliwiają bezpieczny transfer danych między domenami.
Nowoczesne przeglądarki używają CORS w kontenerze API - takim jak
XMLHttpRequest
lubFetch
- w celu zmniejszenia ryzyka żądań HTTP pochodzących z różnych źródeł.Jak działa CORS (
Access-Control-Allow-Origin
nagłówek)Wikipedia :
Przykład
Przeglądarka wysyła
OPTIONS
żądanie zOrigin HTTP
nagłówkiem.Wartością tego nagłówka jest domena obsługująca stronę nadrzędną. Gdy strona z
http://www.example.com
próby uzyskania dostępu do danych użytkownika,service.example.com
zostanie wysłany następujący nagłówek żądaniaservice.example.com
:Pochodzenie: http://www.example.com
Serwer at
service.example.com
może odpowiedzieć:Access-Control-Allow-Origin
(ACAO) Nagłówek w odpowiedzi wskazuje, które miejsca pochodzenia są dozwolone.Na przykład:
Access-Control-Allow-Origin: http://www.example.com
Strona błędu, jeśli serwer nie zezwala na żądanie krzyżowego pochodzenia
Access-Control-Allow-Origin
(ACAO) header asterisk który pozwala wszystkich domen:Access-Control-Allow-Origin: *
źródło
Access-Control-Allow-Origin:null
Access-Control-Allow-Origin
? Mam na myśli negacjęAccess-Control-Allow-Origin: *
Ilekroć zaczynam myśleć o CORS, moja intuicja dotycząca tego, która witryna zawiera nagłówki, jest nieprawidłowa, tak jak opisano w pytaniu. Dla mnie pomaga zastanowić się nad celem tej samej polityki pochodzenia.
Celem tej samej zasady pochodzenia jest ochrona przed złośliwym skryptem JavaScript w witrynie siteA.com uzyskującym dostęp do prywatnych informacji, które zostały udostępnione tylko w witrynie siteB.com. Bez tej samej zasady pochodzenia JavaScript napisany przez autorów siteA.com może powodować, że Twoja przeglądarka wysyła żądania do siteB.com, wykorzystując twoje uwierzytelniające pliki cookie dla siteB.com. W ten sposób siteA.com może ukraść tajne informacje, które udostępniasz witrynie siteB.com.
Czasami musisz pracować w wielu domenach, do których wkracza CORS. CORS rozluźnia tę samą zasadę pochodzenia dla domainB.com, używając
Access-Control-Allow-Origin
nagłówka, aby wyświetlić listę innych domen (domainA.com), którym powierzono zaufanie do uruchamiania JavaScript, który może wchodzić w interakcje z domeną A. com.Aby zrozumieć, która domena powinna obsługiwać nagłówki CORS, rozważ to. Odwiedzasz szkodliwe.com, które zawiera JavaScript, który próbuje wysłać żądanie do domeny z mybank.com. Decyzja o tym, czy ustawia nagłówki CORS, które rozluźniają tę samą zasadę pochodzenia, pozwala JavaScript z złośliwą witryną. Jeśli malicous.com może ustawić własne nagłówki CORS zezwalające na własny dostęp JavaScript do mybank.com, całkowicie unieważniłoby to tę samą zasadę pochodzenia.
Myślę, że powodem mojej złej intuicji jest punkt widzenia, który mam przy tworzeniu witryny. To moja strona z całym moim JavaScript, dlatego nie robi nic złośliwego i ode mnie powinno zależeć, z którymi innymi stronami mój JavaScript może wchodzić w interakcje. Kiedy w rzeczywistości powinienem zastanowić się, które inne witryny JavaScript próbują wchodzić w interakcje z moją witryną i czy powinienem używać CORS, aby im na to pozwolić?
źródło
1. Klient pobiera kod javascript MyCode.js z http: // siteA - pochodzenie.
Kod, który wykonuje pobieranie - twój tag skryptu HTML lub xhr z javascript lub cokolwiek innego - pochodzi, powiedzmy, z http: // siteZ . A gdy przeglądarka żąda MyCode.js, wysyła nagłówek Origin: „Origin: http: // siteZ ”, ponieważ może zobaczyć, że prosisz o siteA i siteZ! = SiteA. (Nie możesz przestać lub wtrącać się w to.)
2. Nagłówek odpowiedzi MyCode.js zawiera Access-Control-Allow-Origin: http: // siteB , co, jak sądzę, oznacza, że MyCode.js może tworzyć odniesienia do witryn B.
Nie. Oznacza to, że tylko witryna B może wykonać to żądanie. Więc twoje żądanie MyCode.js z siteZ otrzymuje błąd, a przeglądarka zazwyczaj nie daje ci nic. Ale jeśli sprawisz, że serwer zwróci ACAO: siteZ, otrzymasz MyCode.js. Lub jeśli wyśle „*”, to zadziała, to wpuści wszystkich. Lub jeśli serwer zawsze wysyła ciąg z nagłówka Origin: ... ale ... dla bezpieczeństwa, jeśli boisz się hakerów , Twój serwer powinien zezwalać tylko na źródła z krótkiej listy, które mogą wysyłać te żądania.
Następnie MyCode.js pochodzi z witryny A. Gdy wysyła żądania do witryny B, wszystkie pochodzą z innego źródła, przeglądarka wysyła Źródło: witryna A, a witryna B musi przejąć witrynę A, rozpoznać ją na krótkiej liście dozwolonych żądających i odesłać ACAO: witryna A. Tylko wtedy przeglądarka pozwoli skryptowi uzyskać wynik tych żądań.
źródło
Używając React i Axios , dołącz link proxy do adresu URL i dodaj nagłówek, jak pokazano poniżej
https://cors-anywhere.herokuapp.com/
+Your API URL
Tylko dodanie linku proxy będzie działało, ale może również ponownie wygenerować błąd dla braku dostępu. Dlatego lepiej dodać nagłówek, jak pokazano poniżej.
źródło
Jeśli chcesz tylko przetestować aplikację między domenami, w której przeglądarka blokuje twoje żądanie, możesz po prostu otworzyć przeglądarkę w trybie niebezpiecznym i przetestować aplikację bez zmiany kodu i bez uczynienia kodu bezpiecznym. W systemie MAC OS możesz to zrobić z linii terminala:
źródło
Jeśli używasz PHP, spróbuj dodać następujący kod na początku pliku php:
Jeśli używasz localhost, spróbuj tego:
Jeśli używasz domen zewnętrznych, takich jak serwer, spróbuj tego:
źródło
pracuję z express 4 i węzłem 7.4 i kątowym, miałem ten sam problem, pomogę to:
a) po stronie serwera: w pliku app.js podaję nagłówki do wszystkich odpowiedzi, takich jak:
to musi mieć przed wszystkimi routerami .
Widziałem wiele dodanych tych nagłówków:
ale nie potrzebuję tego,
b) po stronie klienta: w send ajax musisz dodać: „withCredentials: true”, jak:
powodzenia.
źródło
res.header('Access-Control-Allow-Origin', req.headers.origin);
jest taki sam jakres.header('Access-Control-Allow-Origin', '*');
W celu współdzielenia źródła pochodzenia ustaw nagłówek:
'Access-Control-Allow-Origin':'*';
Php:
header('Access-Control-Allow-Origin':'*');
Węzeł:
app.use('Access-Control-Allow-Origin':'*');
Umożliwi to udostępnianie treści dla różnych domen.
źródło
W Pythonie korzystam z
Flask-CORS
biblioteki z dużym powodzeniem. Dzięki temu radzenie sobie z CORS jest bardzo łatwe i bezbolesne. Dodałem trochę kodu z poniższej dokumentacji biblioteki.Instalowanie:
Prosty przykład, który pozwala CORS dla wszystkich domen na wszystkich trasach:
Bardziej szczegółowe przykłady znajdują się w dokumentacji. Użyłem prostego powyższego przykładu, aby obejść problem CORS w aplikacji jonowej, którą buduję, która musi uzyskać dostęp do oddzielnego serwera flask.
źródło
Z własnego doświadczenia trudno jest znaleźć proste wyjaśnienie, dlaczego CORS jest w ogóle problemem.
Gdy zrozumiesz, dlaczego tam jest, nagłówki i dyskusja stają się o wiele wyraźniejsze. Dam temu szansę w kilku liniach.
Chodzi o pliki cookie. Pliki cookie są przechowywane na kliencie według jego domeny.
Kluczowy punkt: kiedy klient wysyła żądanie do serwera, wyśle pliki cookie przechowywane w domenie, w której znajduje się klient.
Jeśli inny klient wysyła do serwera żądanie pochodzenia krzyżowego , te pliki cookie są wysyłane, tak jak poprzednio. Ruh roh.
Ponieważ pliki cookie są sprawdzane zgodnie z oczekiwaniami, serwer autoryzuje odpowiedź.
Yikes.
Tak więc teraz pojawia się kilka pytań i odpowiedzi:
źródło
Po prostu wklej następujący kod do pliku web.config.
Zauważ, że musisz wkleić następujący kod pod
<system.webServer>
tagiemźródło
Aby uzyskać więcej informacji, odwiedź tutaj ....
źródło
Nginx i Appache
Jako dodatek do odpowiedzi apsillerów chciałbym dodać wykres wiki, który pokazuje, czy prośba jest prosta, czy nie (a OPCJE jest wysyłane przed lotem, czy nie)
W przypadku prostego żądania (np. Obrazy z łączami na gorąco ) nie musisz zmieniać plików konfiguracyjnych serwera, ale możesz dodawać nagłówki w aplikacji (hostowanej na serwerze, np. W php), jak wspomniał Melvin Guerrero w swojej odpowiedzi - ale pamiętaj : jeśli dodasz pełny cors nagłówki na twoim serwerze (config) i jednocześnie zezwalasz na proste corsy w aplikacji (np. php), to w ogóle nie zadziała.
A oto konfiguracje dwóch popularnych serwerów
włącz CORS na Nginx (
nginx.conf
plik)Pokaż fragment kodu
włącz CORS na Appache (
.htaccess
plik)Pokaż fragment kodu
źródło