ionic應用程序無法連接到本地主機

Question

我正在一個項目上，該項目允許Android Built Ionic版本2應用程序創建用戶並通過Django Rest API驗證到Django開發人員站點。

使用ionic serve時，身份驗證有效，這是通過使用跨來源資源共享（作為google chrome插件安裝）來實現的。

由於我嘗試在實際的android設備上運行該應用程序，因此使用該應用程序時身份驗證失敗（HTTP 404：未找到URL），但是可以通過同一設備的瀏覽器（通過192.168.22.4:80）訪問localhost 。

細節：

我當前的私有IP地址是192.168.22.4並且正在通過Wamp Apache Server在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）並編輯離子請求
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監聽<IP地址>：<端口號>。 默認情況下，它最初設置為0.0.0.0:80 。 要進行配置，我在我的wamp服務器上更新了httpd.conf，然后添加了以下行： Listen 192.168.22.4:80
2. 在我的離子項目上安裝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 。