Problem with HTTP

Ionic Native
1

Hi everyone!
I am developing an application in angular ionic that connects to an api node made by me as well. But I’m having trouble connecting them using an android device through the native http plugin, when I try to execute a login (which works when I do a local test in the web browser) using console logs, it gives me the error:

[ng] [console.log]: {
[ng]   "status": -1,
[ng]   "error": "There was an error with the request: Failed to connect to /192.168.0.103:3000"
[ng] }

I have already tried the angular http plugin (@ angular / common / http) but it doesn’t work on the device either, it gives me the error:

[console.error]: "ERROR" {
[ng]   "headers": {
[ng]     "normalizedNames": {},
[ng]     "lazyUpdate": null,
[ng]     "headers": {}
[ng]   },
[ng]   "status": 0,
[ng]   "statusText": "Unknown Error",
[ng]   "url": "https://192.168.0.103:3000/users/login/",
[ng]   "ok": false,
[ng]   "name": "HttpErrorResponse",
[ng]   "message": "Http failure response for https://192.168.0.103:3000/users/login/: 0 Unknown Error",
[ng]   "error": {
[ng]     "isTrusted": true
[ng]   }
[ng] }

My info:

Ionic:

   Ionic CLI                     : 6.13.1 (C:\Users\ezeba\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.5
   @angular-devkit/build-angular : 0.1102.10
   @angular-devkit/schematics    : 11.2.10
   @angular/cli                  : 11.2.10
   @ionic/angular-toolkit        : 3.1.1

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 8 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.3.1

System:

   NodeJS : v15.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 7.7.6
   OS     : Windows 10

I tried all the supposed solutions that I found on the internet, but none worked for me, could someone give me a hand with this? I would thank you a lot!

Regards!

PD: Sorry for my bad english! I´m not the best in the language :grin:

2

The code:

const URL = 'https://192.168.0.103:3000';

//This is the code with @angular/common/http plugin
//In this case, work in local web browser
//DataReceived is an enum
loginUser = (data: any): Promise<boolean> => {
    return new Promise(resolve => {
      let user= data.user, password = data.password;
      this.http.post(`${URL}/users/login/`, { user, password }, {}).subscribe(async response => {
        const resp: DataReceived  = response['resp'];

        switch (resp) {
          case DataReceived.incorrectloginData:
            resolve(false);
            break;
          case DataReceived.token:
            const token: string = resp['data'];
            await this.saveToken(token);
            resolve(true);
            break;
        }
      });
    });
  }

//This is the code with @ionic-native/http/ngx plugin 
//It is not complete yet, I created it quickly to test the plugin 
loginUser = (data: any): Promise<boolean> => {
    return new Promise(resolve => {
      let user= data.user, password = data.password;

      this.Http.post(`${URL}/users/login`, { user, password }, {}).then(async response => {
        resolve(true);
      }).catch(err => { console.log(err); });
    });
  }
3

Your English is better than the “code you found on the Internet”.

  • You can’t use HTTPS with private IP addresses. Use a hostname and DNS.
  • There’s virtually never a need for any, and it blinds TypeScript to where it can’t help you diagnose problems. You don’t need or want it here.
  • Don’t needlessly instantiate Promises
  • Mashing up Promises, Observables, and async / await makes the code very hard to follow.
  • Give things descriptive names. Try to avoid data, item, obj names that convey no meaning.
  • It looks like you’re trying to force imperative structure on what is inherently a reactive situation. Just do something like:
interface LoginRequest {
  user: string;
  password: string;
}

interface LoginResponse {
  token: string;
}

loginUser(lreq: LoginRequest): Observable<LoginResponse> {
  return this.http.post(`${URL}/users/login`, lreq).pipe(
    map(rsp => {token: rsp.token}),
    tap(token => this.saveToken(token)));
}

Do the subscription in loginUser's caller.