App with JSON feed working on iOS but not Android

General Discussion
#1

Hi,

I have successfully published a couple of apps with the ZapWorks Studio. Both of the apps use the Z.getJSON method to fetch live info from web services hosted externally. The apps are working great in the Windows emulator and on my iPhone 7, but when I try on Android (Galaxy S5 neo and ancient old Tesco Huddle tablet) the JSON feeds are not loading and I get a message where the info should be saying, ‘Check your connection’. Both Android devices can surf the net fine and have strong wifi signals (am based in a University). I have another app which just fetches a web page when zapped and this is working fine across all platforms.

I’m not sure where to start with the troubleshooting, can anybody help, please?

Best wishes

UPDATE: I can see the request being made from the Android Zappar app to the external JSON feed (Zappar is using AWS). The first request to access the root directory ‘/’ is working but it’s not making the second call to the JSON feed, whereas on iOS both the request for the root and the JSON feed are being made.

#2

Hi damokleaze!

Is it possible that the API you’re using doesn’t set CORS headers? I believe Android is more strict about requiring your server to set those. There’s a note on this page with the details of which headers to set:
https://docs.zap.works/studio/scripting/introduction/utility-functions/ajax/

Let us know if that sorts things out for you!

Cheers,
Connell

1 Like
#3

hi Connell

Thanks very much for getting back to me. Just for info I am using the Z.getJSON shorthand method within the Zappar Design studio on my show page, rather than calling Z.ajax directly.

Luckily, I am in control of the headers on the source API and have followed the advice on the page regarding setting the headers. The JSON feed that loads fine on iOS version of the Zappar app but not on Android is at https://excalibur3.swan.ac.uk/bus/test. Do you have a an API endpoint that is working on the Android version of the app? If so, would you be willing to share the URL so I can test at my end?

Following your advice and that in the docs I have set the headers on my feed as follows:

Access-Control-Allow-Origin: *
Content-type: application/json; charset=utf-8

Right now the feed is still not working on the Android version of the app even with this change… :frowning:

I will try to use the direct Z.ajax method rather than the Z.getJSON in the hope that there may be more success

regards
AL

#4

same problem here, android does a OPTIONS request, if you have an php endpoint running try this:

// Allow from any origin
if (isset($_SERVER[‘HTTP_ORIGIN’])) {
// should do a check here to match $_SERVER[‘HTTP_ORIGIN’] to a
// whitelist of safe domains
header(“Access-Control-Allow-Origin: {$_SERVER[‘HTTP_ORIGIN’]}”);
header(‘Access-Control-Allow-Credentials: true’);
header(‘Access-Control-Max-Age: 86400’); // cache for 1 day
}

and the full php head:

// Allow from any origin
if (isset($_SERVER[‘HTTP_ORIGIN’])) {
// should do a check here to match $_SERVER[‘HTTP_ORIGIN’] to a
// whitelist of safe domains
header(“Access-Control-Allow-Origin: {$_SERVER[‘HTTP_ORIGIN’]}”);
header(‘Access-Control-Allow-Credentials: true’);
header(‘Access-Control-Max-Age: 86400’); // cache for 1 day
}
// Access-Control headers are received during OPTIONS requests
if ($_SERVER[‘REQUEST_METHOD’] == ‘OPTIONS’) {

if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

}

next step set up whitelist safe domain