Статьи

Вызов удаленных сервисов с Ionic Serve

Коллега позвонил мне сегодня с интересным вопросом:

Я уверен, что вы могли столкнуться с этой ошибкой при локальном использовании 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 должна быть доступна.

Итак, чтобы подвести итог — у вас есть несколько различных способов справиться с этим — некоторые требуют некоторых изменений в вашем коде, некоторые нет. Найдите тот, который работает лучше всего для вас, и катитесь с ним.