Ionic 应用程序可以在浏览器上运行，但不能在 Ionic DevApp 上运行答案

【问题标题】：Ionic application able to run on browser but not working on Ionic DevAppIonic 应用程序可以在浏览器上运行，但不能在 Ionic DevApp 上运行
【发布时间】：2020-03-01 20:31:50
【问题描述】：

我是 ionic 新手，如果我的问题很愚蠢，请原谅我。在开发过程中，我使用浏览器显示和测试我的应用程序，它一切正常运行，没有任何问题，但是当我在我的 android 设备上的 Ionic DevApp 上测试我的应用程序时，应用程序无法与后端通信（ REST API）。每次发送请求（如登录请求），系统都会回复[object progressevent]。

console.log 显示错误信息：

[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] }

我的申请：

前端： Ionic + Angular

后端（REST API）：Java Spring MVC、Oracle Developer Database、Hibernate

我已经搜索并尝试在不同的在线资源上找到解决方案，但不幸的是，其他人提供的解决方案在我的场景中不起作用。因此，我发布这个问题是为了寻求任何离子专家的帮助。谢谢。

我的登录请求代码：

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);
            });

我的登录服务代码：

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);
    }

【问题讨论】：

您是否尝试过将配置更改为将某些 url 列入白名单？ source
您应该使用 IP 地址而不是 localhost，并确保您的设备和您的计算机连接到同一个网络

标签： angular rest ionic-framework ionic4 ionic-devapp

【解决方案1】：

感谢您的帮助，我找到了解决方案。

我将前端应用程序代码中的 API 服务 URL 从 localhost 更改为我的计算机 IP 地址，现在一切正常。

来自：

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

到：

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

对 Reaz Murshed 提供的答案大喊大叫： Cannot connect to localhost API from Android app

【讨论】：