bug: setting anything in "allowNavigation" capacitor.config.json will provoke ERR_CONNECTION_REFUSED

[LouAdrien]

Bug Report

Capacitor Version

npx cap doctor output:

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 1.4.0

@capacitor/core: 1.4.0

@capacitor/android: 1.4.0

@capacitor/ios: 1.4.0

Installed Dependencies:

@capacitor/cli 1.4.0

@capacitor/android 1.4.0

@capacitor/core 1.4.0

@capacitor/ios 1.4.0

[error] Main Acitivity ".MainActivity" is not in manifest package "com.bubblevr.wedo". Please update the packages to be the same.

Affected Platform(s)

• [ ] Android
• [ ] iOS
• [ ] Electron
• [ ] Web

Current Behavior

In order to fix some access issue (XHR call to these domains would be cancelled on iOS without it) I am setting the following json in capacitor.config.json

"server": { "allowNavigation": [ "localhost", "ec2-35-181-50-61.eu-west-3.compute.amazonaws.com:1337", "ec2-15-188-204-14.eu-west-3.compute.amazonaws.com:1337", "wedo-front-1670696535.eu-west-3.elb.amazonaws.com" ] }

But as soon as I set these, I get an error page on load of the app on android "the webpage at http://localhost/ could not be loaded because : net::ERR_CONNECTION_REFUSED.

I have also tried adding "*" in the listed of allowed origins, but I cannot get it to work. Removing the "allowNavigation" array will let my app load properly.

Expected Behavior

Application load should not be blocked.

Other Technical Details

npm --version output: 6.4.1 node --version output: v11.0.0

pod --version output (iOS issues only):

Other Information

[jcesarmobile]

can you try removing "localhost"? a sample app would help too

[LouAdrien]

removing localhost did the trick, thanks a lot! It seems a bit counter intuitive though, as one might expect it to allow "localhost" when adding it to the array.

Last point: you might want to review a little bit the documentation here : https://capacitor.ionicframework.com/docs/basics/configuring-your-app/

As it currently says // Normally all external URLs are opened in the browser. By setting this option, you tell // Capacitor to open URLs belonging to these hosts inside its WebView. --> this is not straighforward at all to understand that any http request to domain not listed in allowNavigation will be rejected by the webviews with obscure error code (ex : unsecure request on ios). You might want make the comment clearer, or create a specific section for it as probably all of the ionic application will need to contact external server.

Thanks again!

[jcesarmobile]

"allowNavigation" is for app navigation, meaning, you are in http://localhost and want to navigate to in example https://www.google.com inside your app instead of it being opened in Safari/Chrome.

So, as your app is served from localhost, adding localhost will confuse the app (it's true that could be smarter). If you configure the hostname to something different then it won't use localhost, so you can add localhost to the list if your app is going to navigate to it (be aware that if you have a local server on your computer and use localhost to connect to it, will only work on simulators, or in android, if you enable port forwarding).

What you say about http requests failing if not added to "allowNavigation" sounds weird, specially for iOS as the code is only present on the delegate that handles the webview navigation event, not other requests. For Android, since the urls in "allowNavigation" are proxied for injecting Capacitor plugins, maybe could happen, but in theory only have an effect on html files, other requests return null (that means the original request is done and not proxied).

So, TLDR, if you are having XHR/fetch problems to external sites, the problem is probably something else and adding the urls to "allowNavigation" is not the solution, it's more like a bug on Capacitor that allows you to workaround your server issue. "allowNavigation" should only be used for webview navigation (loading external websites, not requests)

[LouAdrien]

I see, thanks for taking the time to explain!

This might need to be created as a separate issue, but ios builds will definitely fail to request external APIs that properly implement CORS headers without these settings in allowNavigation.

I can try to reproduce in a new sample projet and create a separate bug report, but in the meantime would you have documentation in capacitor that points to how to properly setup the apps for external calls ? The only one I am refering to so far is this one : https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/#network-request-whitelist Which says having <access origin="*" /> in the config.xml should be enough, however it does not work

[jcesarmobile]

Capacitor doesn't have a whitelist plugin, everything should be allowed as long as the server has CORS configured.

Capacitor adds <access origin="*" /> in the generated config.xml but that's for cordova compatibility, some plugins such as cordova-plugin-file-transfer check the config.xml before starting a native connection to see if it's allowed, but doesn't have any effect on webview connections.

[bobbydowling]

Question similar to this... I have the exact same issue however, I don't have "localhost" in "allowNavigation". I have my auth provider url in "allowNavigation" only.

The idea is for the app to redirect to the auth provider, show the user the login flow, then redirect back to http://localhost/callback/....

But I get the connect refused screen above.

Any other ideas?

[itsferasinc]

Question similar to this... I have the exact same issue however, I don't have "localhost" in "allowNavigation". I have my auth provider url in "allowNavigation" only.

The idea is for the app to redirect to the auth provider, show the user the login flow, then redirect back to http://localhost/callback/....

But I get the connect refused screen above.

Any other ideas?

same thing, still looking for solution

[aacassandra]

Begitu, terima kasih telah meluangkan waktu untuk menjelaskan!

Ini mungkin perlu dibuat sebagai masalah terpisah, tetapi ios build pasti akan gagal meminta API eksternal yang menerapkan header CORS dengan benar tanpa pengaturan ini di allowNavigation.

Saya dapat mencoba mereproduksi dalam contoh projet baru dan membuat laporan bug terpisah, tetapi sementara itu apakah Anda memiliki dokumentasi di kapasitor yang menunjukkan cara mengatur aplikasi dengan benar untuk panggilan eksternal? Satu-satunya yang saya maksud sejauh ini adalah yang ini: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/#network-request-whitelist Yang mengatakan ada <access origin="*" />di konfigurasi. xml seharusnya cukup, namun tidak berhasil

I encountered the same issue, to download files using the Cordova file transfer plugin.

i am using ionic 5 + vuejs3 (capacitor)

it looks like capacitor has added by default but it is not compatible with cordova. to make it work with Cordova.

we need to install cordova-plugin-whitelist

npm i cordova-plugin-whitelist
npx cap sync

I hope this helps

[pwoosam]

Question similar to this... I have the exact same issue however, I don't have "localhost" in "allowNavigation". I have my auth provider url in "allowNavigation" only. The idea is for the app to redirect to the auth provider, show the user the login flow, then redirect back to http://localhost/callback/.... But I get the connect refused screen above. Any other ideas?

same thing, still looking for solution

Also having this same issue

[antoniomtnez]

Question similar to this... I have the exact same issue however, I don't have "localhost" in "allowNavigation". I have my auth provider url in "allowNavigation" only.

The idea is for the app to redirect to the auth provider, show the user the login flow, then redirect back to http://localhost/callback/....

But I get the connect refused screen above.

Any other ideas?

Any solution ?, I have the same problem when opening a local HTML with the InAppBrowser plugin. const browser = this.iab.create( "assets/payment/payment.html",'_blank',options );

[Zinga9]

@pwoosam , @bobbydowling @antoniomtnez Any solution to this please help

[benjvoigt]

@pwoosam @bobbydowling @antoniomtnez @Zinga9 Also looking for a solution to the redirect issue. Anything?

[elvisgraho]

Any solution for capacitor 3 so I can work in live reload mode with localhost???

[benjvoigt]

Any solution for capacitor 3 so I can work in live reload mode with localhost???

It's not only related to live reload during development. In fact localhost is used by the app in production to serve the spa which is fine. However once you leave the app using a redirect and try to get back localhost does not seem to be available anymore. Idk what happens behind the curtain but it looks to me that the localhost server just stops whenever you leave the spa.

We're trying to use the oauth oidc protocol to login thru keycloak which involves a redirect to the keycloak server. It doesn't work with capacitor 3 because of this issue. It worked with an earlier version tho. This bug is a deal breaker for us since we do not want to reimplement the entire login masks / social logins etc into the app.

Can we get this issue reopened?

[mcserep]

Question similar to this... I have the exact same issue however, I don't have "localhost" in "allowNavigation". I have my auth provider url in "allowNavigation" only. The idea is for the app to redirect to the auth provider, show the user the login flow, then redirect back to http://localhost/callback/.... But I get the connect refused screen above. Any other ideas?

same thing, still looking for solution

Also having this same issue

I have the very same use case and the same issue. Does anyone have a workaround for this?

This issue should be reopened.

[detectiveosint]

I have the same issue. After 3 days researching I could not find a solution. Could anyone find a solution for this problem?

Many thanks!!!

[udaythummala]

@jcesarmobile Any Solutions apart from suggested, Beating around this issue form 4 Days.

Can this issue be reopened?

[elvisgraho]

Add flag --external when emulating Android device. That will write external IP in the capacitor config instead of usual 'localhost'

[tharrington]

npx cap sync

Question similar to this... I have the exact same issue however, I don't have "localhost" in "allowNavigation". I have my auth provider url in "allowNavigation" only. The idea is for the app to redirect to the auth provider, show the user the login flow, then redirect back to http://localhost/callback/.... But I get the connect refused screen above. Any other ideas?

same thing, still looking for solution

Also having this same issue

I am having this issue as well, any solutions?

[tharrington]

Question similar to this... I have the exact same issue however, I don't have "localhost" in "allowNavigation". I have my auth provider url in "allowNavigation" only.

The idea is for the app to redirect to the auth provider, show the user the login flow, then redirect back to http://localhost/callback/....

But I get the connect refused screen above.

Any other ideas?

@bobbydowling Did you find a solution for this?

[blinkdagger182]

anyone found a solution to this already?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.