CORS, Кордова, AngularJs $http и файл://путаница

У меня есть приложение AngularJS/Cordova, которое проверяет службу JSON на удаленном сервере:

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

Разработка в браузере и запуск моего сервера apache-сервера (http://dev). Я получаю заголовок "Нет" Access-Control-Allow-Origin ", поэтому я исправляю это, добавляя:

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

Все работает отлично, и я вижу Origin:http://dev в моих инструментах Chrome dev.

Итак, чтобы подумать об этом в первый раз, мне интересно, что будет происходить, когда приложение работает в веб-обозревателе Android/iOS. Я решил сделать сборку и развертывание на своих устройствах и ожидать увидеть ту же ошибку в удаленной отладке (Safari для iOS и Weinre для Android), но, к моему удивлению, она работает (без отправки заголовков CORS)! Я также обнаружил, что в обоих устройствах приложение работает в веб-просмотре по схеме file://, а не (как я предполагал) HTTP-серверу, который был предоставлен операционной системой телефона.

Итак, исследование, похоже, предполагает, что CORS не требуется для файла://- такой "сайт" может получить доступ к любому ресурсу XHR в любом домене. Но, когда я тестирую это на настольных браузерах, я обнаружил, что, хотя Safari не нужен CORS для файла://но Chrome делает, и FireFox работает в любом случае без CORS

Итак, мои вопросы:

1) Почему мое приложение работает без CORS в Android/iOS - это потому, что CORS не применяется к файлу://, или, что Кордова делает что-то, чтобы заставить его работать на устройстве?

У меня <access origin="*"/> в моей конфигурации

2), если в ожидании ответов на Q1 я должен быть на безопасном сайте и явно разрешать запросы из приложений, какое значение вы даете Access-Control-Allow-Origin для файла:// "hosts"? в моей отладке в запросах из файла нет заголовка Origin://

3) в дополнение к блокировке запроса XHR на удаленный сервер, Chrome также блокирует мои шаблоны приложений (я использую отдельные файлы), см. ниже. Это потенциальная проблема с моим приложением или просто проблема Chrome, о которой мне не нужно беспокоиться?

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

Ответы

Ответ 1

Для заголовков CORS есть два способа указать, что разрешен междоменный XHR:

  • отправка Access-Control-Allow-Origin: * (разрешить все хосты)
  • поставьте хост, который вы хотите разрешить в заголовок Origin по вашему серверу

Что касается URL-адресов file://, они будут создавать null Origin, которые не могут быть авторизованы с помощью второй опции (эхо-сигнал).

Как упоминается:

Политика междоменной политики не применяется к PhoneGap (по разным причинам, в основном из-за того, что ваше приложение, по сути, отключается от файла://URI on-device).

Помните, что вам нужно настроить белый список приложений для доступа к этим внешним доменам.

Что касается проблемы Chrome, которую можно увидеть в консоли разработчика:

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.

было проведено обсуждение Chromium project issue tracker, № 40787. Они отмечают проблемы, поскольку не будет исправлять, поскольку это поведение происходит по дизайну.

Существует обходное решение, предлагаемое просто отключить CORS в Chrome для целей разработки, начиная с хром с --allow-file-access-from-files --disable-web-security

например. для Windows

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

Вот еще один ответ, связанный с кордорой:

Проверьте эти ресурсы для получения дополнительной информации о CORS:

Проверьте также поддержку браузера для CORS:

И для записи формальная спецификация CORS для W3C:)