How to access private domain network to call API request in release build in IONIC 5 Cordova Project?

Ionic Framework Ionic Angular
1

Hi, I want to access private domain(for example: https://172.17.13.105/API/) to requesting to server and fetch API response, but unable to retrieve data in release build.

Here is my httpservice.ts file:

import { HttpClient, HttpHeaders } from '@angular/common/http';

async apiPostService(serverFile: any, postData: any) {
    this.ionLoader.showLoading();
    return new Promise(resolve => {
      const headers = new HttpHeaders();
      const options = { headers: headers, withCredintials: false };
      this.baseurl = environment.apiUrl + serverFile;
      this.http.post(this.baseurl, postData, options).subscribe(data => {
        resolve(data);
        this.ionLoader.hideLoader();
      }, err => {
        this.ionLoader.hideLoader();
        this.errorAlert('Error', err, 'service1');
      });
    });
  }

Ionic:

   Ionic CLI                     : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 10.1.2
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 29 other plugins)

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 1.7.2) : 1.5.0

System:

   ios-deploy : 1.11.4
   ios-sim    : ios-sim/9.0.0 darwin-arm64 node-v16.13.2
   NodeJS     : v16.13.2 (/Users/oditek/.nvm/versions/node/v16.13.2/bin/node)
   npm        : 9.6.7
   OS         : macOS
   Xcode      : Xcode 14.3 Build version 14E222b

How to do it and the logic behind it. Kindly suggest the best answer to fetch data from server using private network.

2

You probably sholdn’t use things like loading directly on the service that you use for comunicating with the backend/retrieving data.

The way I retrieve data from a remote server(that I have control over) is as follows:

some.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { lastValueFrom } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SomeService {

  constructor(private http: HttpClient) { }
  
  someMethod(param:string, obj: ObjectType): Promise<any> {
    let params = {
      param1: 'foo',
      param2: JSON.stringify(obj)
    };
   
    return lastValueFrom(this.http.post(environment.baseUrl + '/endpoint', params));
  }
}

some.component.ts:

import { SomeService }  from 'path/to/service';

constructor(private someService: SomeService){}

method() {
  // present loading...
  let obj: ObjectType = {
    for: 'bar',
    // ...
  };
  this.someService.someMethod('foo', obj).then((res) => {
    console.log(res);
  }).catch((err) => {
    console.log(err);
  }).finally(() => {
    // hide loading
    // by hiding the loading here you don't have to do it on both 'then' and 'catch' blocks
  });
}
3

Hi @josemarsc-dev Thanks for the quick response.
I understood the way to retrieve data from remote server. As per my code snippet, i was able to retrieve data from any public remote server.

However my point is , how to retrieve data from remote server those have private network(self signed CA). It means that private IP or Domain is defined some specific area or location. and Android device should connect to that WIFI and should be able to fetch data from that server only in case of debug or release mode.

Is it possible to do it in release build or need some self signed ssl-pinning to to store certificate in asset folder and retrieve?

Please suggest some ideas to do it in better way. Thanks in advance!