F7 ajax POSTS request not working in Android 9, data object not being passed! works with XHR only

[rapgithub]

I am trying to deploy my app with android and only in android post request to api fail with 502 error, all cors are correctly set on the server side but I do not understand why only in android this happens that all post requests fail!

Is there something I need to set in config.xml that is missing or anyone has had the same problem with android?

I run this on my terminal:

HTTPS=true cordova run android --target=Pixel_4a_API_30_Samsung_s10

everything looks ok!

INFO    | Android emulator version 31.1.3.0 (build_id 7904455) (CL:N/A)
...
Waiting for emulator to boot (this may take a while)...BOOT COMPLETE
Deploying to emulator emulator-5584
INSTALL SUCCESS
LAUNCH SUCCESS
Saving session...
...copying shared history...
...saving history...truncating history files...
...completed.

App is open in the emulator but the request to my api fail with 502 only with android! IOS works fine!

here the error when checking in chrome with chrome://inspect/

my config.xml for android

content src="index.html" />
    
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>

    <allow-navigation href="*" />

    <platform name="android">

      <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
          <application android:usesCleartextTraffic="true" />
          <application android:networkSecurityConfig="@xml/network_security_config" />

      </edit-config>

      <resource-file src="res/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
      
      <preference name="loadUrlTimeoutValue" value="700000" />

      <preference name="StatusBarOverlaysWebView" value="false" />
      <preference name="android-minSdkVersion" value="22" />
      <preference name="SplashMaintainAspectRatio" value="true" />
      <splash density="land-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
      <splash density="land-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
      <splash density="land-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
      <splash density="land-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
      <splash density="land-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
      <splash density="port-hdpi" src="res/screen/android/drawable-hdpi/screen.png" />
      <splash density="port-mdpi" src="res/screen/android/drawable-mdpi/screen.png" />
      <splash density="port-xhdpi" src="res/screen/android/drawable-xhdpi/screen.png" />
      <splash density="port-xxhdpi" src="res/screen/android/drawable-xxhdpi/screen.png" />
      <splash density="port-xxxhdpi" src="res/screen/android/drawable-xxxhdpi/screen.png" />
      <icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" />
      <icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" />
      <icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" />
      <icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" />
      <icon density="xxhdpi" src="res/icon/android/mipmap-xxhdpi/ic_launcher.png" />
      <icon density="xxxhdpi" src="res/icon/android/mipmap-xxxhdpi/ic_launcher.png" />
    </platform>

I installed the app on my device to check if this was something to do with the localhost that use android emulator to run but the same issue!

I also tried to add below this to the config.xml and it does not work either… same problem!

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

any ideas how to fix this for Android?
thanks for any tips!

[rapgithub]

I think I found where the error comes from!

In the server function data params are not being passed from the Ajax function to the server but this only with Android with IOS works fine!

So the params are empty and the response cannot process the request without the params data being passed.

Is there anything to know how to fix this Ajax request with Android so the data object can be passed to the server without issues? the curious thing in IOS the data object is passed without any problem!

server lambda function:

/**********************
 * post method *
 **********************/
app.post('/stores/v1', function (req, res) {

  const {
    bucket_identifiers,
    origin,
    timezoneId,
    timezoneName,
    todayIs,
    user_id
  } = req.body;
  
  var params = {
    "bucket_identifiers": bucket_identifiers,
    "origin": origin,
    "timezoneId": timezoneId,
    "timezoneName": timezoneName,
    "todayIs": todayIs,
    "user_id": user_id
  };
  
   res.json(params); //no data being passed params is empty because req is empty only this happen with android with iOS all params are filled and passed
.... 

Ajax request:

    getStores({
      state
    }, {
      $f7, $,
      retries,
      backoff
    }, ) {

      var data = {
        "bucket_identifiers": [...],
        "origin": {
          "latitude": 111,
          "longitude": 111
        },
        "timezoneId": 'Europe/Rome',
        "timezoneName": '',
        "todayIs":  ...,
        "user_id": null
      };

      const retryCodes = [408, 500, 502, 503, 504, 522, 524];

      state.storesLoading = true;

      return new Promise(function (resolve, reject) {

        request({
            headers: {
              'Accept': 'application/json, text/plain, */*',
              'Content-Type': 'application/json',
            },
            url: `url-path/stores/v1`,
            dataType: 'json',
            async: true,
            method: 'POST',
            data: JSON.stringify(data), //data not being passed with Android
            cache: false,
            crossDomain: true,
          })
          .then((res) => {
...

any solution for this?

[rapgithub]

Finally I see the XHR post requests in Android are working and passing the data object but with f7 ajax post request data object is not being passed this only happens with Android with IOS all ajax requests GET or POST are working perfectly and passing data without any issue!

Any fix for this with Android?
I am using the last version of F7!

Thanks

[ddd_poka]

In android 9 and newer, you need to create a file:
path:
platform/android/app/src/main/res/xml/network_security_config.xml

write in the file:

<?xml version="1.0" encoding="utf-8"?>

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">ip.ip.your_ip</domain>
        <domain includeSubdomains="true">api.mapbox.com</domain>
      
    </domain-config>
</network-security-config>

[rapgithub]

I have this file already inside

platform/android/app/src/main/res/xml/network_security_config.xml

but the only things I see are missing are these you mentioned:

        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">ip.ip.your_ip</domain>
        <domain includeSubdomains="true">api.mapbox.com</domain>

I will try to add these lines and see…

Question:

for “ip.ip.my_ip” taken from whatismyip.com will be enough?
after “ip.ip.” my_ip correct?

regarding api.mapbox.com I must include that as well? never heard about it before!

3. when deploying the app to the android store after testing the app locally and on my phone… I guess it is not necessary that subdomains information there right? or these are automatically ignored when building the final apk for the Android Store?

or do I have to leave clean the network_security_config.xml like this:

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
    </domain-config>
</network-security-config>

I still do not understand why with XHR post requests works fine but not with f7 post requests in Android… even if the network_security_config.xml is not configured as you mentioned me to be missing those subdomains! XHR post request works!

Do you know why?

thanks for this info!