Framework7.request() works in browser, fails in emulator/android

Questions
1

I cannot make working Framework7.request(…) in emulator neither in phone, while it works in dev mode in browser.
Version: [email protected]

In routes.js I try to get some data from a remote URL and use it in the target page:

var routes = [
(...)
{
    path: '/display-detail/:itemId/',
    async: function ({ router, to, resolve }) {
     (...)
        Framework7.request({
             url: 'http://my-remote-page:8080/item/detail/'+itemId, 
             timeout: 5000, 
             async: true,
             method: 'GET',
            success: function (data,status,xhr) {
                              console.log('received: ' + data);
                             resolve ({component: TargetPage}, {props:{detail:data}});
            },
            error: function (xhr, status, msg) {
                             console.log('request failed: ' + status 
                                    + ', xhr: ' + xhr
                                    + ', status: ' + xhr.status
                                    + ', statusText: ' + xhr.statusText
                                    + ', readyState: ' + xhr.readyState
                                    + ', responseText: ' + xhr.responseText
                                    + ', msg: ' + msg
                           );
            }
         });
     (...)
    }
}
]

It works like a charm in dev mode in my browser.
But in emulator the request is not sent, xhr status is 0, readyState 4, empty message, no clue to find the cause :frowning:

It might be related to this older forum subject, but in my case with XHttpRequest I’m facing the same scenario, i.e. it fails in emulator:

Error message in console:
“NetworkError: Failed to execute ‘send’ on ‘XMLHttpRequest’”

Whitelist in cordova plugin is set to “*” thus it doesn’t help ([SOLVED] App.request problem - #6 by neworld)

I appreciate any tip/advice !

2

Newer versions of Cordova do not require the Whitelist plugin, as most of the heavy lifting of security policies are done in your HTML’s Content-Security-Policy Meta tag, and in the access settings in config.xml.

I’d suggest taking a read of the latest security document from Cordova: Security Guide - Apache Cordova

Also check the specs on CSP: https://content-security-policy.com/

Because it certainly does sound like your issue is one of access. Your JS Console should be telling you which network requests are being refused, it will be easy to add these to your CSP.

3

First, thanks for your reply and for the tip to check CSP.
I played a bit with CSP and it’s as you said - when I break some of the rules I can see in console log msg like:

"Refused to connect to 'http://xx.106.198.254:8080/item/detail/8888' because it violates the following Content Security Policy directive: "connect-src 'self'". ", source: file:///android_asset/www/js/app.js (1)

But (unfortunately) my default CSP seems to be fine, i.e. no such a msg appears, it doesn’t emphasize the URL itself, here’s what the ‘error’ function still puts into log:

[INFO:CONSOLE(1)] "request failed: 0, Xhr: [object XMLHttpRequest], status: 0, statusText: , readyState: 4, responseText: , msg: 0", source: file:///android_asset/www/js/app.js (1)

When I add to the request object this ‘complete’ function:

complete: function(xhr, st){console.log("complete, xhr.status: " + xhr.status + ", status: " + st);}

then here’s what it puts into log:
[INFO:CONSOLE(1)] "complete, xhr.status: 0, status: error", source: file:///android_asset/www/js/app.js (1)

4

http … violates … “connect-src ‘self’”
where ‘self’ is an https

there is a way to overcome it (like always)
but you better buy a 10 euro certificate, and you ready to go.

5

Give this plugin a go and see if it helps https://github.com/oracle/cordova-plugin-wkwebview-file-xhr

6

Thanks for navigating me to Cordova plugins, finally I tried another one which matches my needs: https://github.com/silkimen/cordova-plugin-advanced-http (v3.2.2)

With this plugin you can see in log what exactly causes the issue: Cleartext requests not permitted, i.e. HTTP is forbidden.

Adding into AndroidManifest.xml the permission:

android:usesCleartextTraffic=“true”

did the magic, i.e. using the plugin requests to remote HTTP server work now !

Btw, even with the permission in manifest file there’s still no change with Framework7.request(…), it still doesn’t work, without saying anything in console log.

7

as time goes by, you will find more and more issues with http.
until eventually no plugin will help you (google will ban your app from play-store, guarantee.)

a 10 euro cert will solve all you problems