При разработке приложения на фреймворке Ionic, которое будет использоваться как Web версия и как мобильное приложение встает проблема реализации HTTP запросов к бекенду.
Если АПИ расположено на другом домене то в браузере возникает проблема CORS, которая обходиться проксированием запросов.
Локально .
Через файл proxy.conf.json
{
"/api": {
"target": "http://api-example.com",
"logLevel": "debug",
"secure": false,
"changeOrigin": true
}
}
При размещении на стенде - путем настройки веб сервера или размещения клиента рядом с АПИ на одном адресе.
При работе в режиме мобильного приложения iOS и Android примеряется плагин https://ionicframework.com/docs/native/http.
npm install cordova-plugin-advanced-http
npm install @ionic-native/httpionic
cap sync
Он поддерживает работу в фоновом режиме и выполняет запросы не из Webview
При реализации базового класса для работы с HTTP сначала определяется на какой платформе запущен код и потом выбирается необходимый HTTP клиент.
Пример реализации POST запроса
constructor(private _http: HttpClient,
private _platform: Platform,
private _nativeHttp: HTTP
) {
}
async baseRequest(url: string, body = {} as any,) {
if (this._platform.is('android') || this._platform.is('ios') ) {
this._nativeHttp.setDataSerializer('json');
const res = await this._nativeHttp.post(ApiCreatorService._fullApiUrl + url, body, this._getMobileHeaders());
return JSON.parse(res.data);
} else {
const currUrl = ApiCreatorService._baseApiUrl + url;
return this._http
.post<IOut1>(currUrl, body, {
headers: await this._getHeader()
}).toPromise();
}
}