CORS, Cordova, AngularJs $http and file: / / confusion

Question

CORS, Cordova, AngularJs $http and file: / / confusion

Mam AngularJS / Cordova aplikacji, która ankiety usługi JSON na zdalnym serwerze:

$http({method: 'GET', url: 'http://example.com/index.php'})

Rozwijając się w przeglądarce i uruchamiając mój intranetowy serwer apache (http://dev) otrzymuję "nie ma nagłówka 'Access-Control-Allow-Origin'", więc poprawiam to dodając:

Header set Access-Control-Allow-Origin "http://dev"

Wszystko działa dobrze, i widzę Origin:http://dev w moim Chrome dev tools.

Więc, myśląc o tym po raz pierwszy, zastanawiam się, jakie będzie pochodzenie, gdy aplikacja będzie działać w przeglądach internetowych Android/iOS. Postanawiam zrobić buduj i wdrażaj na moich urządzeniach i spodziewaj się tego samego błędu w zdalnym debugowaniu (Safari dla iOS i Weinre dla Androida), ale ku mojemu zaskoczeniu działa (bez wysyłania nagłówków CORS)! Uważam też, że w obu urządzeniach aplikacja działa w widoku sieci Web pod schematem plik://, a nie (co założyłem) serwer http jakiegoś rodzaju dostarczany przez system operacyjny telefonu.

Więc badania wydają się sugerować, że CORS nie jest wymagany dla file: / / - taka "strona" może uzyskać dostęp do dowolnego zasobu XHR w dowolnej domenie. Jednak, kiedy testuję to na przeglądarkach desktopowych, stwierdzam, że podczas gdy Safari nie potrzebuje CORS dla pliku://, ale Chrome tak, a FireFox działa tak czy inaczej bez CORS

Więc moje pytania:

1) Dlaczego moja aplikacja działa bez CORS w Android / iOS - to dlatego, że CORS nie stosuje się do pliku://, lub, Cordova robi coś, aby to działa w urządzeniu?

Mam <access origin="*"/> w moim config

2) jeśli oczekując odpowiedzi na Q1, chciałbym być na bezpiecznej stronie i wyraźnie zezwolić żądania z aplikacji, jaką wartość dajesz Access-Control-Allow-Origin dla pliku: / / "hosts"? w moim debugowaniu nie ma nagłówka Origin w żądaniach z pliku: / /

3) oprócz blokowania żądania XHR na zdalnym serwerze, Chrome blokuje również Moje szablony aplikacji( używam oddzielnych plików), patrz poniżej. Czy jest to potencjalny problem z moją aplikacją, czy po prostu problem z Chrome, o który nie muszę się martwić?

XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP.

16

javascript angularjs ajax cors cordova

Author: KevInSol, 2014-09-18

Source

1 answers

score 26 · Accepted Answer

Istnieją dwa sposoby, aby nagłówki CORS zasygnalizowały, że XHR powinien być dozwolony w wielu domenach:

sending Access-Control-Allow-Origin: * (allow all hosts)
umieść host, NA który chcesz zezwolić w nagłówku Origin za pomocą backendu

Jeśli chodzi o adresy URL file:// będą one produkować null Origin które nie mogą być autoryzowane za pomocą drugiej opcji (echo-back ).

Jako wymienione:

Polityka między domenami nie ma zastosowania do PhoneGap (z różnych powodów, głównie dlatego, że Twoja aplikacja zasadniczo działa z pliku: / / URI na urządzeniu).

Pamiętaj, że będziesz musiał skonfigurować białą listę dla swoich aplikacji, aby uzyskać dostęp do tych zewnętrznych domen.

Co do problemu Chrome , który można zobaczyć w konsoli dewelopera:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.html XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.

Była dyskusja na tematśledzenia problemu projektu Chromium, #40787 . Zaznaczają problemy jako nie naprawią jako takie zachowanie dzieje się z założenia.

W Chrome Chrome nie ma żadnych ograniczeń co do tego, czy jest to przeglądarka mobilna, czy przeglądarka mobilna.]}

Np. Dla Windows

`C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security`

Tutaj jest więcej cordova związane odpowiedź:

CORS i aplikacje phonegap
Biała lista domen w Apache Cordova - model bezpieczeństwa, który kontroluje dostęp do zewnętrznych domen.

Sprawdź te zasoby, aby uzyskać więcej informacji na temat CORS:

Sprawdź również obsługę przeglądarek dla CORS:

http://caniuse.com/#feat=cors

I dla przypomnienia formalna Specyfikacja CORS na W3C :)