$http request status 0 with https

Question

THE SITUATION:

I am working on a Ionic app that receive data from an API.

Before, the API was on http:// address and everything was working fine.

Then we have moved the API to https:// and it's not working anymore. Or well, it is still working accessing it in the browser, but not in the phone (or emulator).

I am not sure what may be the problem. In the console log I see that the status of the request is 0.

It may be related with the whitelist, with the headers, or with CORS. I have tried several approaches but none worked.

WHITELIST:

Before in the config.xml there was this whitelist:

<allow-navigation href="http://*/*" />

I have tried to modify it in several ways but that didn't fix the problem. For example I have tried:

<allow-navigation href="https://*/*" />

and

<allow-navigation href="*" />

API REQUEST:

This is one example of API request:

$http.get( 'https://MY_DOMAIN.com/mobile/list_mobile_project/' ,{},{"headers" : {"Content-Type" : "application/x-www-form-urlencoded; charset=UTF-8" }})
     .success(function(data, status, headers, config) 
     {
             // code
     }).
     error(function(data, status, headers, config) 
     {
         console.log('Error with the API list_mobile_project');
         console.log(data);
         console.log(status);
         console.log(headers);
         console.log(config);
     });

API RESPONSE:

And this is an example of API response:

public function list_mobile_project()
{
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); 

    // code

    echo json_encode( $project_list );
}

THE QUESTION:

How to get the API working also on HTTPS?

If it is a CORS related problem, how can I enable it on server side?

Did you support CORS in your server? Also, in the browser the certificates of the https url shows any errr or warning? — piyuj, Feb 02 '16 at 15:09
In the browser there are no erros. About CORS support in the server i don't know. — FrancescoMussi, Feb 02 '16 at 15:11
@johnnyfittizio in browser you will be able to get the Response without error, place where you might get is while using it with the AJS, there you will be getting this CORS , so try to enable the CORS for https in server side. what is the platform from which you getting the API? , if its C# i can help you with enabling it — Krsna Kishore, Feb 04 '16 at 16:48
@johnnyfittizio Another point i want to tell you that EVERY response, even Error 500, must have the CORS headers attached. If the server doesn't attach the CORS headers to the Error 500 response then the XHR Object won't parse it, thus the XHR Object won't have any response body, status, or any other response data inside. — Krsna Kishore, Feb 04 '16 at 16:56
@johnnyfittizio after a bit of research here is the [link](https://github.com/angular/angular.js/issues/13085#issuecomment-148047721) if the $https returns status 0 its not with the Angular side, its something with the browser side and also solution for this is stated [here](http://stackoverflow.com/questions/31312703/whenever-a-cors-http-request-fails-the-response-returned-is-always-0) — Krsna Kishore, Feb 04 '16 at 17:01
Thank you very much for your efforts! Exactly what do you mean by "enable the CORS for https in server side"? (the api is in php) — FrancescoMussi, Feb 05 '16 at 07:58
@johnnyfittizio you didnt mention my name using `@` thats why i didnt get notification that you commented and i was replying . ok Coming to your Question , what i mean by Enable CORS means , in the server side where you wrote your api i.e. php in there you need to tell your service like this ` ` — Krsna Kishore, Feb 06 '16 at 04:16
When you make the query to the API and look in the network tab in the developers tool. Does it break when doing a GET or a OPTIONS request? If you see a bad response on the OPTIONS request it means it needs a preflight response too. — gr3g, Feb 06 '16 at 15:06

score 2 · Answer 1 · answered Feb 08 '16 at 05:00

When you switch from Http to Https, mostly the issue is with Hand Shake or certificate compliance. Please check if your SSL certificate is available in your trust store plus check whether your android device supports certificate provider. For example CA certificates were not supported for initial android platforms.

May be following two links can give you some idea.

http://nelenkov.blogspot.in/2011/12/using-custom-certificate-trust-store-on.html

http://www.codeproject.com/Articles/826045/Android-security-Implementation-of-Self-signed-SSL

THIS WAS MY PROBLEM TOO! – NitZRobotKoder Mar 31 '17 at 06:38 — NitZRobotKoder, Mar 31 '17 at 06:38

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

I think from a device CORS is not a problem. see for instance this. Testing from your browser it will create a CORS problem. The problem I think is your whitelist. In your config.xml add (source: this):

<access origin="https://yourapi.com" />

It's just a guess !

edited May 23 '17 at 10:30

Community

1
1

answered Feb 11 '16 at 02:21

user3791775

426
3
5

score 0 · Answer 3 · answered Feb 11 '16 at 14:32

0

Try with: ionic plugin add cordova-plugin-whitelist

https://forum.ionicframework.com/t/update-to-cordova-5-0-0-make-http-call-error/22703

with cordova 5.0.0 they reintroduced the whitelist plugin.. You need to add this plugin and allow your backend-urls.

answered Feb 11 '16 at 14:32

Benjamin RD

11,516
14
87
157

score 0 · Answer 4 · edited Dec 14 '16 at 18:42

0

$http.get('/someUrl').success(successCallback);

If your app is being served over HTTPS then any calls you are making are to the same host/port etc., so also via HTTPS.

If you use the full URIs for your requests e.g. $http.get('http://foobar.com/somePath') then you will have to change your URIs to use https

edited Dec 14 '16 at 18:42

Noam Hacker

4,671
7
34
55

answered Dec 14 '16 at 16:18

Ravi Raj

27
3

score 0 · Answer 5 · answered Jan 22 '17 at 23:38

If you see this error on Android running your APK file inside the device, the error has nothing to do with CORS. When your developing native or hybrid/native mobile apps, unless they're progressive web apps, CORS is not an issue. When developing mobile apps that will target a device, when you're developing and doing initial debugging, use chrome and disable CORS. You only need to run [install-folder]\chrome.exe --disable-web-security --user-data-dir

score -2 · Answer 6 · edited Feb 11 '16 at 05:37

-2

I had also faced this kind of problem. Step are help you to solve problem

Create new Ionic application
Lunch your phone or emulator
Modify your WWW directory
Again compile your app and lunch your phone or emulator

Problem is, Check whether added plug in correctly your ionic application.

My application problem got solved by adding plug in

I think, those steps will help you.

edited Feb 11 '16 at 05:37

Partha Sarathi Ghosh

10,936
20
59
84

answered Feb 10 '16 at 11:05

Amila Sampath

655
4
11
28

Thank you for reply @amila. But i don't quite understand what is the solution you propose to get properly the APİ from HTTPS. – FrancescoMussi Feb 11 '16 at 06:51

$http request status 0 with https

6 Answers6