Блог

Главная - Вопросы по программированию - Ionic 4 Angular 7 простой удаленный HTTP-запрос CORS

Ionic 4 Angular 7 простой удаленный HTTP-запрос CORS

#angular #cors #ionic4

#угловой #cors #ionic4

Вопрос:

Я немного новичок в ionic и angular и пытаюсь выяснить, как отправить простой HTTP-запрос на удаленный сервер в обход CORS. Мое первоначальное решение состояло в том, чтобы сделать это:

 this.httpClient.get<MyObj>("/api");

И затем я создал proxy.config.json с этим содержимым:

 {
  "/api": {
    "target": "http://real-remote-host/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

Это отлично работает, когда я выполняю ng serve . Однако я перехожу к созданию Android APK с помощью ionic cordova build android , а затем этот код больше не работает. Похоже, что прокси работает только при запуске через serve команду, но не через build команду. Я, конечно, должен что-то упускать, поскольку простой HTTP-запрос не может быть таким сложным.

Кроме того, удаленный хост не может быть изменен, поэтому, пожалуйста, не предлагайте изменять, чтобы разрешить CORS с удаленного хоста.

Комментарии:

1. Правильно, прокси является частью сервера разработки webpack (см. Документы ) и не является частью выходных данных рабочей сборки.

2. Хорошо, итак, я могу выбросить решение proxy.config.json, поскольку оно не будет работать для производственной сборки. Есть ли какие-либо альтернативы?

Ответ №1:

Мне удалось найти решение, чтобы заставить это работать на Android. Он основан на этом руководстве, предоставленном Ionic:https://ionicframework.com/docs/native/http . Однако их статья далека от завершения.

Самое большое, чего не хватает в руководстве, — это того, что вам нужно включить HTTP в качестве поставщика в свой модуль приложения angular.

 import { HTTP } from "@ionic-native/http/ngx";
...
@NgModule(
...
   providers: [
      ...
      HTTP
      ...
   ]
...
)
...

Вторая проблема, с которой я столкнулся, заключалась в том, что он продолжал говорить «plugin_not_installed». Это потому, что так получилось, что я вызывал this.http.get() до того, как он был готов к использованию. Чтобы решить эту проблему, мне нужно было:

 ...
this.platform.ready().then(() => {
     this.http.get(...);
});
...

Поскольку служба REST, которую я использовал, является HTTP, а не HTTPS, и поскольку я ориентируюсь на SDK 28 , мне нужно было включить этот фрагмент в мой config.xml . Главное, что для Usescleartextraffic должно быть установлено значение true в AndroidManifest.xml файл.

 ...
<platform name="android">
...
    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config>
...
</platform>
...

Также обратите внимание, что это решение не работает для браузера, поэтому вам придется использовать ранее упомянутое решение proxy.config.json для целей тестирования. Вы можете использовать this.platform.is("android") , чтобы проверить, Android ли это. Я не могу проверить, будет ли это работать должным образом на ios, но на странице плагина указано, что он поддерживает Android и ios.