On android app built with Capacitor, error ERR_CONNECTION_REFUSED after redirect on local url

user_14018566 0
Viewed 174

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

enter image description here

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

capacitor vue.js http-status-code-302 android
2 Answers

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.

user_103895710

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);
user_70248060
Related