离子应用程序无法连接到本地主机

Question

我正在开发一个项目，该项目允许 Android Built Ionic 版本 2 应用程序创建用户并通过 Django Rest API 对 Django 开发站点进行身份验证。

使用ionic serve 时，身份验证有效，这是通过使用跨域资源共享（作为谷歌浏览器插件安装）实现的。

当我尝试在实际的 android 设备上运行该应用程序时，使用该应用程序时身份验证失败（HTTP 404：找不到 URL），但可以通过同一设备的浏览器访问本地主机（通过 192.168.22.4 :80)。

详情：

我当前的私有 IP 地址是 192.168.22.4，开发站点目前正在通过 Wamp Apache 服务器在 localhost 端口 80 上提供服务。

这是我在 Ionic App（注册）上的 http 请求的代码片段：

let headers = new Headers();
      headers.append('Content-Type','application/json');

      this.http.post("http://192.168.22.4:80/api-user-create", JSON.stringify(this.postData), {headers: headers}).subscribe(res => {
        console.log(res.json());
        this.showAlert();
      }, (err) => {
        console.log(err);
      });

应用解决方案：

这些是我尝试过但仍然无法连接到本地主机的步骤：

1. 确保允许应用程序访问WiFi连接，验证我的IP地址是否正确，关闭我的防火墙甚至我的杀毒软件。我还在我的开发服务器上启用了网络发现。
2. 使用代理服务器 (ngrok) 并编辑 Ionic 请求
3. 在 Apache 服务器上启用 CORS 并编辑 Ionic 请求
4. 编辑 Ionic 请求代码。我试图将 192.168.22.4:80 更改为：
   • 192.168.22.4
   • 127.0.0.1:80
   • 127.0.0.1
   • localhost:80
   • localhost
   • 10.0.2.2
   • 10.0.2.2:80

有人遇到过这个问题并解决了吗？

Answer 1

问题解决了！ 我已经解决了：

1. 让 wamp 监听 :。它最初默认设置为0.0.0.0:80。要进行配置，我更新了 wamp 服务器上的 httpd.conf，然后添加了以下行： Listen 192.168.22.4:80
2. 在我的 ionic 项目上安装 cordova-plugin-whitelist。为此，我必须运行： cordova plugin add cordova-plugin-whitelist --save

3. 编辑我的 Ionic 代码并删除请求的端口号：

     let headers = new Headers();
     headers.append('Content-Type','application/json');
   
     this.http.post("http://192.168.22.4/api-user-create", JSON.stringify(this.postData), {headers: headers}).subscribe(res => {
       console.log(res.json());
       this.showAlert();
     }, (err) => {
       console.log(err);
     });
   

4. 重新构建并运行应用程序

阅读Ionic App - No Internet Access了解更多信息。