Capacitor Android not loading http javascript source #4477

LechLee · 2021-04-21T03:42:43Z

LechLee
Apr 21, 2021

Im trying to load remote scripts / css from my local web server under url of http://127.0.0.1:4002/

But seem to be having error in capacitor android, capacitor ios is working fine. I also manage to load the css from without any error https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css

My guess is not supporting http?

Here is my code in loading it

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css" />
        <link href="http://127.0.0.1:4002/test/fonts.css" rel="stylesheet" />
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height, viewport-fit=cover,  user-scalable=no"
        />
        <title>My Title</title>
    </head>

    <body id="body">
        
    </body>
</html>

Here is the error i got under 'chrome://inspect/#devices'

My dependencies:

"@capacitor-community/http": "^1.0.0-alpha.1",
"@capacitor/android": "^3.0.0-rc.0",
"@capacitor/cli": "^3.0.0-rc.0",
"@capacitor/core": "^3.0.0-rc.0",
"@capacitor/device": "^0.5.5",
"@capacitor/dialog": "^0.4.5",
"@capacitor/filesystem": "^0.5.1",
"@capacitor/ios": "^3.0.0-rc.0",

My capacitor.config.json

{
    "appId": "com.example.app",
    "appName": "hello-cap-2",
    "bundledWebRuntime": false,
    "npmClient": "npm",
    "webDir": "www",
    "plugins": {
        "SplashScreen": {
            "launchShowDuration": 0
        }
    },
    "server": {
        "allowNavigation": ["*"]
    },
    "android": {
        "allowMixedContent": true
    },
    "cordova": {}
}

Answered by jcesarmobile

Apr 21, 2021

127.0.0.1 is your computer, iOS simulator understand it because the simulator is running on your computer, but on Android, the emulator is a "virtual machine" with its own networking, so 127.0.0.1 for it its the own emulator, not your computer.

You can enable port forwarding to send the 4002 port traffic to the emulator, or you can use 10.0.2.2 IP as it automatically loops to 127.0.0.1

https://developer.android.com/studio/run/emulator-networking

Also, note that using 127.0.0.1 won't work on real devices because of the same reason, it's better if you use the local IP of the computer instead, something like 192.168.1.30

View full answer

jcesarmobile · 2021-04-21T11:30:59Z

jcesarmobile
Apr 21, 2021
Maintainer

127.0.0.1 is your computer, iOS simulator understand it because the simulator is running on your computer, but on Android, the emulator is a "virtual machine" with its own networking, so 127.0.0.1 for it its the own emulator, not your computer.

You can enable port forwarding to send the 4002 port traffic to the emulator, or you can use 10.0.2.2 IP as it automatically loops to 127.0.0.1

https://developer.android.com/studio/run/emulator-networking

Also, note that using 127.0.0.1 won't work on real devices because of the same reason, it's better if you use the local IP of the computer instead, something like 192.168.1.30

4 replies

LechLee Apr 22, 2021
Author

Thanks for the explanation!

I change the ip to my local IP eg. http://192.168.0.107:4002 and got an error of 'ERR_CLEARTEXT_NOT_PERMITTED'

Based on this answer in
https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted

one of the option is to add 'android:usesCleartextTraffic="true"' to AndroidManifest.xml

and is working fine!!

Just curious, anyway that i can add this in capasitor.config.json?
so that i can enable that for development build, and turn it off when production build.

pwespi Apr 22, 2021

Yes, you can add

"server": {
  "cleartext": true
}

in your capacitor.config.json. See https://capacitorjs.com/docs/v3/config

jcesarmobile Apr 22, 2021
Maintainer

Capacitor’s cleartext config option is not intended for user use, it’s for tooling like ionic CLI when it enables live reload. Manually adding it by the user doesn’t solve the problem of being there in development only, the user should still remember to delete it from capacitor.config.json.

For doing it for development only I like this answer from the link you provided

https://stackoverflow.com/a/61976001/1351469

LechLee Apr 22, 2021
Author

This config at capacitor.config.json

server": {
  "cleartext": true
}

Seem to work fine without live reload.

Just a thought, i can write some scripts to make the value to true or false like,

Generate out the capacitor.config.json using scripts, and supply arguments to the scripts, to make cleartext true or false
Run npx cap sync
Build the apk file

Here is a sample repo that i wrote for the script:
https://github.com/LechLee/capasitor-generate-config

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Capacitor Android not loading http javascript source #4477

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Capacitor Android not loading http javascript source #4477

Uh oh!

Uh oh!

LechLee Apr 21, 2021

Replies: 1 comment · 4 replies

Uh oh!

jcesarmobile Apr 21, 2021 Maintainer

Uh oh!

LechLee Apr 22, 2021 Author

Uh oh!

pwespi Apr 22, 2021

Uh oh!

jcesarmobile Apr 22, 2021 Maintainer

Uh oh!

LechLee Apr 22, 2021 Author

LechLee
Apr 21, 2021

Replies: 1 comment 4 replies

jcesarmobile
Apr 21, 2021
Maintainer

LechLee Apr 22, 2021
Author

jcesarmobile Apr 22, 2021
Maintainer

LechLee Apr 22, 2021
Author