How to get fetch TOWARDS localhost to FUNCTION on CARDOVA Android

[ZouhirBensm]

My question is simple.

I make a call using fetch in my CARDOVA app like so, from the ./www/js/index.js script:

const response = await fetch('http://localhost:3000/poc3/convert', {
  method: 'POST',
  body: formData,
  headers: { 'Accept': 'audio/mpeg' },
});

I get this in the logs:

Error: TypeError: Failed to fetch

I know the API endpoint works 100%.

I know the system works with a fetch towards the prod URL endpoint (https://mywebsite/poc3/convert).

I think this fetch error is because I need to enable something from the config.xml file.

Below are all the versions and configs I am running:

   Cordova Packages:
    
        cli: 12.0.0
            common: 5.0.1
            create: 5.0.0
            lib: 12.0.2
                common: 5.0.1
                fetch: 4.0.0
                serve: 4.0.1
    
    Project Installed Platforms:
    
        android: 14.0.0
    
    Project Installed Plugins:
    
        cordova-plugin-advanced-http: 3.3.1
        cordova-plugin-file: 8.1.3
        cordova-plugin-file-transfer: 2.0.0
    
    Environment:
    
        OS: Ventura 13.1 (22C65) (darwin 22.2.0) x64
        Node: v18.19.0
        npm: 10.2.3
    
    android Environment:
    
        android:
    [=======================================] 100% Fetch remote repository...       
    Available Android targets:
    ----------
    id: 1 or "android-35"
         Name: Android API 35, extension level 13
         Type: Platform
         API level: 35
         Revision: 2
    
    
    Project Setting Files:
    
        config.xml:
    <?xml version='1.0' encoding='utf-8'?>
    <widget id="com.mywebsite" version="1.0.0" xmlns="http://www.w3.org/ns/widgets"
        xmlns:cdv="http://cordova.apache.org/ns/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <name>mywebsite</name>
        <description>Sample Apache Cordova App</description>
        <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
            Apache Cordova Team
        </author>
        <content src="index.html" />
        <allow-intent href="https://mywebsite.com/*" />
    
        <!-- Localhost API calls enabled in development for testing search code: #000 for all enables -->
        <access origin="http://localhost:3000" />
        <!-- <access origin="http://*/*" /> -->
    
        <access origin="https://mywebsite.com" />
    
        <allow-navigation href="https://mywebsite.com/*" />
    
        <preference name="AndroidInsecureFileModeEnabled" value="true" />
        <preference name="AndroidExtraFilesystems" value="files,files-external,cache" />
        <preference name="AndroidPersistentFileLocation" value="Compatibility" />
        <platform name="android">
    
            <config-file target="AndroidManifest.xml" parent="/manifest">
                <uses-permission android:name="android.permission.INTERNET" />
                <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
                <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
                    android:maxSdkVersion="28" />
                <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"
                    android:maxSdkVersion="30" />
            </config-file>
    
        </platform>
    </widget>
    
        package.json:
    --- Start of Cordova JSON Snippet ---
    {
      "platforms": [
        "android"
      ],
      "plugins": {
        "cordova-plugin-file": {
          "ANDROIDX_WEBKIT_VERSION": "1.4.0"
        },
        "cordova-plugin-advanced-http": {
          "ANDROIDBLACKLISTSECURESOCKETPROTOCOLS": "SSLv3,TLSv1"
        },
        "cordova-plugin-file-transfer": {}
      }
    }
    --- End of Cordova JSON Snippet ---

Extra notes:

1. The HTML meta is set like so: connect-src 'self' http://localhost:3000 https://mywebsite.com;
2. I tried to editing the inner configuration files in .xml in these files: ./platforms/android/app/src/main/AndroidManifest.xml and ./platforms/android/app/src/main/res/xml/config.xml, but the build process RESETS the configurations to DEFAULT. (no effect)
3. I tried to add BELOW in the main ./config.xml. And it did not work either

BELOW:

    <!-- #000 -->
    <!-- <allow-navigation href="http://localhost:3007/*" />
    <allow-intent href="http://localhost:3007/*" />
    <preference name="AndroidInsecureFileModeEnabled" value="true" /> -->

    <config-file target="AndroidManifest.xml" parent="/manifest">
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
            android:maxSdkVersion="28" />
        <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"
            android:maxSdkVersion="30" />
        <!-- #000 -->
        <!-- <application android:usesCleartextTraffic="true" /> -->
    </config-file>

        


    <!-- #000 -->
    <!-- <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
        <application android:usesCleartextTraffic="true" />
    </edit-config> -->

    <!-- #000 -->
    <!-- <config-file parent="/*" target="res/xml/config.xml">
        <network-security-config>
            <base-config cleartextTrafficPermitted="true" />
        </network-security-config>
    </config-file> -->

</platform>

JS android xml webview android-webview

Added some "extra notes" about what I tried to resolve the issue to give reader an idea.

[breautek]

http://localhost:3000

This domain will be the local device itself, so unless if your android emulator/device is running a web server on port 3000, this won't work.

I'm going to assume that you're not running the web server on the android device, that web server running port 3000 is running on your own workstation.

With that assumption... there are two options, one is only valid for android emulators. The other will work on both emulators and physical devices, for as long as they are connected to the same network (connected to the same wifi/router).

Emulator Only solution

The android emulators has a special network interface that refers to the host machine. IP 10.0.2.2 refers to your workstation's loopback interface, 127.0.0.1. That means things you are running on your workstation and listening on 127.0.0.1 (aka localhost) should be accessible inside the android emulator through 10.0.2.2

So:

const response = await fetch('http://10.0.2.2:3000/poc3/convert', {
  method: 'POST',
  body: formData,
  headers: { 'Accept': 'audio/mpeg' },
});

Should work inside android emulators, assuming that you have a webserver running on your workstation on port 3000.

Private network solution

Private home networks typically allows unfettered access to other devices on the network, so you can use your workstation private ip to connect to the server, you just need to know how to find the your private ip.

Each router is different but most routers by default operate on 192.168.0.x or 192.168.2.x.

On linux/mac you can use: ifconfig and look for an interface that has inet 192.168.x.y. Example of output is below:

wlp0s20f3: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.50.132 netmask 255.255.255.0 broadcast 192.168.50.255
inet6 fe80::e41c:cfb1:4da4:b6fd prefixlen 64 scopeid 0x20
ether 1a:52:a0:de:31:da txqueuelen 1000 (Ethernet)
RX packets 2012183 bytes 2700389985 (2.5 GiB)
RX errors 0 dropped 2 overruns 0 frame 0
TX packets 1044154 bytes 131777077 (125.6 MiB)
TX errors 0 dropped 40 overruns 0 carrier 0 collisions 0

On windows the equivalent command is ipconfig, which will show something like:

Ethernet adapter Ethernet:

Connection-specific DNS Suffix . : home.local
IPv4 Address. . . . . . . . . . . : 192.168.50.132
Subnet Mask . . . . . . . . . . . : 255.255.255.0
Default Gateway . . . . . . . . . : 192.168.50.1

Once you've found your private ip, you can use that to connect to your server over your home network:

// 192.168.50.132 is following the example, but you'll need to replace it with your own ip as shown in ipconfig / ifconfig
const response = await fetch('http://192.168.50.132:3000/poc3/convert', {
  method: 'POST',
  body: formData,
  headers: { 'Accept': 'audio/mpeg' },
});

Couple of caveats with this approach:

1. many servers by default bind to 127.0.0.1, you may need to adjust settings to allow it to bind to your private ip, or 0.0.0.0 (to bind on all interfaces), so that you can accept connections over your private ip.
2. Routers by default use DHCP assignments, this means your private IP will change over time. Most routers however provides the ability to assign static ips to your devices.

I know networking can be confusing and it's generally not a skill set many developers have, it's more of a tertiary skill set. So I hope above helps, if not I can try to clarify anything that isn't clear.