I’m tearing my hair out here. AJAX calls using $http.post fail only on Android, not while testing in the browser, not while running on an iPhone.
app.js:
angular.module('greenroom', ['ionic', 'Controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.transition('none');
$stateProvider
.state("main", {url: "/", templateUrl: "templates/main.html", controller: "MainController"})
.state("login", {url: "/login", templateUrl: "templates/login.html", controller: "MainController"})
.state("signup", {url: "/signup", templateUrl: "templates/signup.html", controller: "MainController"})
.state("upload", {url: "/upload", templateUrl: "templates/upload.html", controller: "MainController"})
.state("searchresults", {url: "/searchresults", templateUrl: "templates/searchresults.html", controller: "MainController"})
.state("details", {url: "/searchresults/:id", templateUrl: "templates/details.html", controller: "DetailsController"});
$urlRouterProvider.otherwise("/");
});
The relevant portion of controllers.js:
angular.module('Controllers',['SearchService'])
.controller('MainController', function($scope, $location, $http, SearchService) {
$scope.userPostal = '';
$scope.apiEndpointAddress = 'http://real.hostname.redacted/api/dispensarySearch';
$scope.locationSearched = SearchService.location;
$scope.goDetails = function (item) {
$location.path('/searchresults/' + item.id);
};
$scope.searchData = {
latitude: null,
longitude: null,
postalCode: null
}
$scope.searchDispensaries = function() {
if (this.userPostal.length==0) {
SearchService.location = "Your current location";
navigator.geolocation.getCurrentPosition(
function(position) {
this.searchData.latitude = position.coords.latitude;
this.searchData.longitude= position.coords.longitude;
$http.post(this.apiEndpointAddress,JSON.stringify(this.searchData))
.success($scope.handleSuccess)
.error($scope.handleError);
alert('y');
},
function(error) {
alert('Error getting location: ' + error);
return;
},
{ enableHighAccuracy: true }
);
} else {
SearchService.location = this.userPostal;
this.searchData.postalCode = this.userPostal;
$http.post(this.apiEndpointAddress,JSON.stringify(this.searchData))
.success(this.handleSuccess)
.error(this.handleError);
}
};
$scope.handleError = function(data, status, headers, config) {
alert(status + ' ' + JSON.stringify(data) + ' ' + JSON.stringify(config)); // + 'Your search was unsuccessful. If you are searching based on your current location, make sure location services are enabled.');
}
$scope.handleSuccess = function(data, status, headers, config) {
alert("Result: " + JSON.stringify(data));
SearchService.searchResults = data;
$location.path('/searchresults');
};
})
In the browser, or on an iOS device, handleSuccess is called. On an Android device, handleError is called with the status set to 404.
On the server side, it’s a Java-powered website using RESTeasy to create a REST API. I have a servlet filter generating these headers in response to each request:
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.addHeader("Access-Control-Max-Age", "3600");
response.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
Help, please! Thanks in advance!