Ajax calls working in Android but not iOS

Question

I'm developing an app in Nativescript for the first time and running into an issue where AJAX calls work on Android but not iOS. I have a login.js file which requires a user-view-model (user-view-model.js), and when I test the code on Android it takes me to the "home" page but it hits the catch function on iOS.

login.js:

var dialogsModule = require("ui/dialogs");
var UserViewModel = require("../../shared/view-models/user-view-model");
var applicationSettings = require("application-settings");

var user = new UserViewModel({ 
  email: "aaa@aaa.com", 
  password: "aaa" 
});

var frameModule = require("ui/frame");
var page;

exports.loaded = function(args) {
  page = args.object;
  page.bindingContext = user;
};

exports.login = function () {
  user.login().catch(function(error) {
    dialogsModule.alert({
      message: "Unfortunately we could not find your account.",
      okButtonText: "OK"
    });
    return Promise.reject();
  }).then(function(response) {
    console.dir(response)
    console.log("past response")
    applicationSettings.setString("user_id", response.user_id);
    applicationSettings.setString("first_name", response.first_name);
    applicationSettings.setString("last_name", response.last_name);
    applicationSettings.setString("user_type", response.user_type);
    var topmost = frameModule.topmost();
    topmost.navigate("views/home/home");
  });
};

user-view-model.js:

var config = require("../../shared/config");
var fetchModule = require("fetch");
var observableModule = require("data/observable");
var http = require("http");

function User(info) {
    info = info || {};

    var viewModel = new observableModule.fromObject({
        email: info.email || "",
        password: info.password || ""
    });

    viewModel.login = function() {
        let loginEmail = JSON.stringify(this.get("email")).replace(/['"]+/g, '');
        let loginPassword = JSON.stringify(this.get("password")).replace(/['"]+/g, '');
        console.log(loginEmail, loginPassword);
        let loginUrl = config.serverPHPServiceUrl + "Login.php?user_id=" + loginEmail + "&password=" + loginPassword;
        console.log(loginUrl);
    
        // I tried this way first and wasn't able to login on iOS, which made me try the second method below.
        // return fetchModule.fetch(loginUrl, {
        //   method: "POST",
        //   headers: {
        //     "Content-Type": "application/json"
        //   }
        // }).then(handleErrors).then(function(response) {
        //   return response.json();
        // }).then(function(data) {
        //   console.dir(data);
        //   console.log(data["results"][0]["user_id"])
        //   return data["results"][0];
        // });

        // This method works on Android but not iOS.
        return http.getJSON(loginUrl).then(function(response) {
              console.dir(response);
              return response.results[0];
        })

    };

    return viewModel;
};

function handleErrors(response) {
    console.log("in errors")
    if (!response.ok) {
        console.log(JSON.stringify(response));
        throw Error(response.statusText);
    }
    return response;
}

module.exports = User;

Is there anything fundamentally wrong with my code, or do asynchronous calls work differently on iOS vs Android in Nativescript? I did the Grocery tutorial and didn't run into this issue, so I didn't think this was the case. Does it matter that the backend is using PHP?

score 0 · Answer 1 · answered Dec 08 '17 at 00:07

I fixed my issue: I started a new project with Angular 2 and ran into the same error, but then it gave me the error message "Error: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection." I solved it by adding "https" to my url call, but this post has another solution.

Ajax calls working in Android but not iOS

1 Answers1