Коллега позвонил мне сегодня с интересным вопросом:
Я уверен, что вы могли столкнуться с этой ошибкой при локальном использовании IONIC SERVE.
XMLHttpRequest не может загрузить http://something.mybluemix.net/rest/audit/list. В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Источник ‘http: // localhost: 8100’, следовательно, не имеет доступа.
По сути, я вызываю URL с помощью метода $ http.get () с фабрики. У Ionic, похоже, есть несколько способов вызова служб REST (1. $ http или 2. ngResource).
Итак, у меня вопрос: есть ли у вас решение этой проблемы или предпочтительный способ решения / вызова служб REST из Ionic? Любой пример кода будет оценен.
Это отличный вопрос, так как есть несколько способов справиться с этим. Прежде чем мы начнем, давайте сделаем переподготовку. Что это за ошибка и почему мы ее получаем? Браузеры имеют модель безопасности, которая предотвращает запрос Ajax от одного домена к другому. Именно это привело к созданию JSON / P, который по сути является обходным путем для вызова удаленных служб.
При работе с Cordova вам не нужно об этом беспокоиться. Но при использовании Ionic Serve и запуске приложения в браузере, вы должны найти способ обойти это. Несмотря на простоту использования JSON / P, я стараюсь избегать добавления кода в мои приложения Cordova / Ionic, которые просто предназначены для его запуска в браузере настольного компьютера. Чтобы было ясно, я делаю это время от времени, но я стараюсь избегать этого. (И на самом деле, один из ответов ниже будет включать именно такую модификацию.) Итак, какие есть варианты?
1) Включить CORS.
Современные браузеры поддерживают CORS, что позволяет удаленному API сообщать, что ваш код может вызывать его из другого домена. Если у вас есть доступ к API (то есть вы создаете как мобильную сторону, так и серверную часть), тогда просто включить CORS для вашего API. Как вы это делаете, зависит от языка, конечно. Я описал, как это сделать в ColdFusion, и вы можете довольно быстро включить его с помощью Node.js / Express .
2) Взлом с расширением.
Вы можете найти расширение Chrome ( Super Long URL для него здесь ), которое на лету изменит заголовки CORS в вашем приложении. Очевидно, что это только Chrome, но мне нравится, что он работает с нулевыми изменениями где угодно.
3) Прокси-серверы Ionic Serve
Знаете ли вы, что в Ionic Serve есть прокси-функция? На своей странице « Тестирование в браузере» они обсуждают, как можно изменить параметр в файле ionic.project для добавления прокси. Вот пример.
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
Как только вы это сделаете, запрос к / v1 будет перенаправлен локально через прокси на api.instagram.com/v1. Это классная функция, но это означает, что ваш код должен быть изменен. Обратите внимание, что вы можете немного упростить это, проверив платформу браузера, как описано здесь — Классы платформ — или используя ionic.Platform . Ой, поцарапай это! Я естественно предположил, что если для обозначения платформы браузера был добавлен элемент CSS, то ionic.Platform также будет поддерживать его, но, насколько я могу судить, этого не делает. Я подал вопрос 4306 для этого.
Примечание. Я провел небольшое быстрое тестирование этого, в основном console.logging:
console.log(document.body.classList.contains('platform-browser'));
console.log(document.body.classList);
Как ни странно, внутри блока выполнения Ionic, даже внутри $ ionicPlatform.ready, класс НЕ существует. Он существует только в моем первом контроллере. Это кажется … неправильно для меня.
Итак, еще тестирование. В документах для ionic.Platform упоминается массив платформ. Вы можете сделать: ionic.Platform.platforms.contains("browser")
чтобы увидеть, если вы находитесь в браузере. Так что моя проблема 4306 там немного не так. Вы можете проверить — но похоже, что вспомогательная утилита isBrowser должна быть доступна.
Итак, чтобы подвести итог — у вас есть несколько различных способов справиться с этим — некоторые требуют некоторых изменений в вашем коде, некоторые нет. Найдите тот, который работает лучше всего для вас, и катитесь с ним.