在使用电容器构建的 android 应用程序上，在本地 url 上重定向后出现错误 ERR_CONNECTION_REFUSED

Question

I'am developping a Vuejs project (vue 2.6.11) and I want to build an android app from it. For that, I'am using capacitor: "@capacitor/android": "^3.4.0" and "@capacitor/core": "^3.4.0".

The app is OK, I can run it with android studio but I've got an error in my login flow because of a web redirection: Following is the user journey:

• app open web content on https://localhost/home
• user click on Login button, that send a request to my distant server
• this request respond a 302 code and try to redirect to a local web url: https://localhost/login
• The app cannot load https://localhost/login and I've got a net: ERR_CONNECTION_REFUSED

I expect my app to load the webpage that my vue rooter render at this URL '/login'.

This is my capacitor.config.json:

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

There are plenty topics on the web about ERR_CONNECTION_REFUSED error with capacitor but nothing seems relevant to my prolem.

Thanking you,

Jonath

Answer 1

Try to change localhost to your [local-ip-address]:[port] or 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

I have achieved a workaround.

I have used 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);