$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?

Answer 1

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

Answer 2

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 !

Answer 3

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.

Answer 4

$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 eg $http.get('http://foobar.com/somePath') then you will have to change your URIs to use https

Answer 5

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

Answer 6

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

1. Create new Ionic application
2. Lunch your phone or emulator
3. Modify your WWW directory
4. 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.