$http get error with status -1, data: null

#1

Hi,
I’m new to Ionic and I’m trying to make a $http get request to a php file on localhost but it returns an error with status -1 and data null. Running the url directly from the browser returns a JSON array with no problem. Angularjs documentation states: “-1 usually means the request was aborted, e.g. using a config.timeout” but I have no idea how to fix this.

I’m making the request as follows:

$http.get(‘http://localhost:8888/testQuery.php’).then(function(response){
//the response from the server is now contained in 'response’
alert(‘success’)
}, function(error){
//there was an error fetching from the server
alert(JSON.stringify(error))
});

1 Like
#2

Get same issue… Did you got the solution? If yes, please share…

1 Like
#3

Unfortunately not yet.

#4

How are you testing this? Because localhost wouldn’t be available on an emulator or a device.

#5

Through ionic serve. I also tried substituting localhost with my computer’s IP address but I get the same error.

#6

Did you find any solution to this problem?

#7

Could be a lot of things…
How do you host the local server? apache? Do you get any errors there? Could you provide an screenshot of the error you get in your browser?

#8

I just found this: http://stackoverflow.com/questions/29838341/ionic-app-rest-calls-to-webapi-hosted-on-localhost-works-using-ionic-serve-but

I think that is your issue.

#9

Check out 2 things:

  1. CORS issues (documented in the official Ionic docs)
  2. I ran into this issue a few times and the problem was just that I had no network connectivity on my device! Switched on the WIFI - problem solved :joy:
1 Like
#10

Thanks for the links. I did replace localhost with my IP address. I’m running MAMP server. Still works when I call directly on the browser and now it works on the emulator too but not with ionic serve. I’ll check out the CORS documentation in more detail.

#11

Hi Etl, have you figured out the solutions? I meet the same problem and tried many ways, still get no luck.

#12

Hey, I got it to work but I’m not sure what exactly made it work. I tried several things.

  1. I added these lines to the top of the PHP file (for CORS issues)

    if (isset($_SERVER[‘HTTP_ORIGIN’])) {
    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, OPTIONS");         
    
     if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
         header("Access-Control-Allow-Headers:        
         {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    
     exit(0);
    

    }

  2. I also think I had an IP address conflict. I refreshed the router and suddenly everything worked.

  3. Is it not working in both controller and factory? If it works in controller, could be this:
    http://stackoverflow.com/questions/33555594/ionic-http-get-doesnt-work-in-factory

  4. Also ionic serve (–lab) option sometimes just doesn’t work right for me. So running on the emulator or on the Ionic View app might help.

I hope this helps.

#13

Hi All,

I got into a similar issue, $http calls won’t work on emulator or ionic view app

I am trying to access

I started chrome by enabling this flag “–disable-web-security”, ionic serve works fine and connects to both the servers

On emulator, I am getting status of “-1” when trying to connect to the two apis above.
Im getting this response back
response {“data”:null,“status”:-1,“config”:{“method”:“GET”,“transformRequest”:[null],“transformResponse”:[null],“url”:“http://www.google.com/finance/info?q=VMW",“headers”:{“Accept”:"application/json, text/plain, /”}},“statusText”:""}

Can someone please help me on what -1 status mean and how to fix that?

Thanks in advance

#14

I am having this exact issue.

I am noticing that everyone else having it is communicating with an https service … I wonder if that has something to do with it?

#15

I am seeing this issue when I node express server is configured with https (when configured as http it works fine).

I have an Ionic App that I am using restangular to communicate with a node express application.

Everything is working when I have the node express application configured to use http.

Ionic App side:

RestangularProvider.setBaseUrl(‘http://11.22.33.44:3000’);

// custom header
interceptors.serialNumber = function (element, operation, what, url, headers, query) {
return {
headers: angular.extend({
‘x-serialnumber’: deviceStore.serialNumber
}, headers)
};
};

Restangular.one(‘Admin’).get()
.then(function (data) {
console.log(data);
}, function (error) {
console.log(error);
});
Node Express App side:

var app = express();
app.use(cors());
app.get(’/Admin, function(req, res) {
console.log(admin-get’);
res.send(200);
});
I was expecting I would need to handle a pre-flight request since the cors node module states: “An example of a ‘complex’ CORS request is one that uses an HTTP verb other than GET/HEAD/POST (such as DELETE) or that uses custom headers.” So I am not sure why this works?

I reconfigure the Ionic App and Node Express App to use a https address instead of a http:

Ionic App side:

RestangularProvider.setBaseUrl(‘https://11.22.33.44:3000’);

// custom header
interceptors.serialNumber = function (element, operation, what, url, headers, query) {
return {
headers: angular.extend({
‘x-serialnumber’: deviceStore.serialNumber
}, headers)
};
};

Restangular.one(‘Admin’).get()
.then(function (data) {
console.log(data);
}, function (error) {
console.log(error);
});
Node Express App side:

var app = express();
app.use(cors());
app.get(’/Admin, function(req, res) {
console.log(admin-get’);
res.send(200);
});
when the Ionic App performs the GET request, I see in the Chrome debugger under “Network” an OPTIONS request that gets canceled (request’s status). This tells me that I need to enable cors pre-flight on my Node Express App side (though why didn’t I see this error when the server was configured with http instead of https?).

So I tried the following on the Node Express App side per the express js cors module documentation:

app.options(‘Admin’, cors()); // enable pre-flight request
app.get(’/Admin’, cors(), function(req, res) {
console.log(‘admin-get’);
res.send(200);
});
I see the same thing in the Chrome debugger under “Network” - a OPTIONS request that gets canceled (request’s status). I also tried

app.options(’*’, cors());
with the same result.

I then removed the insertion of the custom header (x-serialnumber) on the Ionic App side. It now works.

So why would the Node Express Application work when configured with a http address with out handling a pre-flight request I would expect due to the insertion of a custom header on the Ionic App side?

When the Node Express App is configured with a https address (as well as Ionic App side) why am I not handling the OPTIONS request? Is the way I am configuring cors incorrect? What am I missing?

I think it is a cors issue since I can eliminate the custom header on the Ionic App side when they are configured for a https address and it works.

What do I need to do to get this working?

#16

I ended up clearing up my issue. It was not CORS related or anything else on this string, I think it ended up being a configuration issue where my app was not getting internet access.

I wanted to pass on that I didn’t figure this out until I figured out that remotely debugging was the way to go.

The error message was far more descriptive and ultimately gave me a better insight to how to solve the issue.