在使用電容器構建的 android 應用程序上，在本地 url 上重定向后出現錯誤 ERR_CONNECTION_REFUSED

Question

我正在開發一個 Vuejs 項目（vue 2.6.11），我想從中構建一個 android 應用程序。 為此，我正在使用電容器：“@capacitor/android”：“^3.4.0”和“@capacitor/core”：“^3.4.0”。

該應用程序沒問題，我可以使用 android studio 運行它，但由於 web 重定向，我的登錄流程出錯：以下是用戶旅程：

• 應用程序在 https://localhost/home 上打開 web 內容
• 用戶單擊登錄按鈕，向我的遠程服務器發送請求
• 此請求響應 302 代碼並嘗試重定向到本地 web url: https://localhost/login
• 該應用程序無法加載 https://localhost/login 並且我有一個網絡：ERR_CONNECTION_REFUSED

我希望我的應用程序能夠加載我的 vue rooter 在此 URL '/login' 處呈現的網頁。

這是我的電容器.config.json：

{
  "appId": "com.XXX",
  "appName": "XXXX",
  "bundledWebRuntime": false,
  "server": {
    "allowNavigation": [
      "SERVERURL"
    ],
    "androidScheme": "https"
  },
  "webDir": "dist"
}

web 上有很多關於電容器 ERR_CONNECTION_REFUSED 錯誤的主題，但似乎與我的問題無關。

感謝您，

喬納特

Answer 1

嘗試將localhost更改為您的[local-ip-address]:[port]或10.0.2.2:[port] 。

I'm not familiar in capacitor, but I've built my android app via flutter, and I found out that in android I need to use the ip 10.0.2.2 in my url.

Answer 2

我已經實現了解決方法。

我用過https://github.com/apache/cordova-plugin-inappbrowser

      let ref = cordova.InAppBrowser.open('https://google.com', '_blank', 'location=yes');
      let myCallback = function (event: any) {
        console.log('Updated URL: ', event.url);

        // separate host form url
        let host = event.url.split('/')[2];

        // get pathName after host
        let pathName = event.url.split(host)[1];
        console.log('Path: ', pathName);

        if (host === 'yourdomain.com') {

          console.log('InAppBrowser closed');
          ref.close();

          setTimeout(() => {
            this.$router.push(pathName);
          }, 500);
        }
      }

      ref.addEventListener('loadstart', myCallback);