Вызов удаленных сервисов с 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"
    }
  ]
}

console.log(document.body.classList.contains('platform-browser'));
console.log(document.body.classList);