Ionic application able to run on browser but not working on Ionic DevApp

Question

I’m new to ionic, please forgive me if my question is stupid. During the development, I’m using the browser to show and test my application which everything is working perfectly without any issue, but when I test my application on the Ionic DevApp on my android device, the application not able to communicate with the backend (REST API). Every time I send a request (such as login request), the system will response [object progressevent].

console.log to display error message:

[ng] [console.log]: {
[ng]   "headers": {
[ng]     "normalizedNames": {},
[ng]     "lazyUpdate": null,
[ng]     "headers": {}
[ng]   },
[ng]   "status": 0,
[ng]   "statusText": "Unknown Error",
[ng]   "url": "http://localhost:8080/restapi/api/user/login",
[ng]   "ok": false,
[ng]   "name": "HttpErrorResponse",
[ng]   "message": "Http failure response for http://localhost:8080/restapi/api/user/login: 0 Unknown Error",
[ng]   "error": {
[ng]     "isTrusted": true
[ng]   }
[ng] }

My application:

Frontend: Ionic + Angular

Backend (REST API): Java Spring MVC, Oracle Developer Database, Hibernate

I have search and try to find solution on different online resources, but unfortunately the solutions provided by others is not working in my scenario. Thus, I’m posting this question to request for help from any of you who are expert in ionic. Thank you.

My code for login request:

this.http.login(this.user)
        .subscribe((userData: any) => {
                console.log('Success login');
                this.http.storeToken(userData.token);
                this.loginForm.reset();
                this.errorMessageService.setValidationErrorMessage('');
                this.exceptionHandlerService.setErrorResponse('');
                console.log(userData);
                this.router.navigate(['']);
            },
            error => {
                if (this.exceptionHandlerService.getErrorResponse() === null || this.exceptionHandlerService.getErrorResponse() === '') {
                    console.log(error);
                    this.exceptionHandlerService.setErrorResponse(error.error);
                }
                console.log(error);
            });

My code for login service:

userUrl = 'http://localhost:8080/restapi/api/user/';
login(user: User) {
        const body = JSON.stringify(user);
        return this.http.post<User>(this.userUrl + 'login', body, httpOptions);
    }

Answer 1

Thanks for the help, I have found the solution.

I changed the API service URL in the frontend application code from localhost to my computer ip address and now everything is working.

FROM:

userUrl = 'http://localhost:8080/restapi/api/user/';

TO:

userUrl = 'http://192.164.0.111:8080/restapi/api/user/';

Big shout-out to the answer that contributed by the Reaz Murshed: Cannot connect to localhost API from Android app