AngularJS $http.post return status 0

Question

I'm working on Ionic framework's angular js. And when I request the data, it always return the status 0 as the error. I believe the issue is HTTP access control (CORS). But I already set Access-Control-Allow-Origin as * . What do I need to do more? Please help. Thank you.

Angular JS Code

var params = {
         limit: 5,
          page: 1
       };

$http.post('https://www.example.com/getdata.php', { params: params })
.success(function (data,status) {                        
        console.log("Conection available . Status s" + status);                         
})
.error(function (data, status, headers, config) {
        console.log("Error Status " + status);
});

Return Header

Access-Control-Allow-Origin → *
Access-Control-Request-Headers → *
Access-Control-Request-Method → POST
Cache-Control → max-age=2592000
Connection → Keep-Alive
Content-Length → 1933
Content-Type → application/json
Date → Thu, 08 Sep 2016 06:47:31 GMT
Expires → Sat, 08 Oct 2016 06:47:31 GMT
Keep-Alive → timeout=5, max=100
Server → Apache/2.4.20 (Ubuntu)

UPDATE

---

So the actual error code from browser log is

XMLHttpRequest cannot load https://www.example.com/getdata.php . Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

And I tried updating Access-Control-Allow-Headers header as the following.

 $http.post('https://www.example.com/getdata.php',
                        { params: params },
                        { 'Access-Control-Allow-Headers': 'application/json' })

And updated the respond header as the following.

Access-Control-Allow-Headerss → application/json
Access-Control-Allow-Origin → *
Access-Control-Request-Headers → *
Access-Control-Request-Method → POST
Cache-Control → max-age=2592000
Connection → Keep-Alive
Content-Length → 1933
Content-Type → application/json
Date → Thu, 08 Sep 2016 07:22:03 GMT
Expires → Sat, 08 Oct 2016 07:22:03 GMT
Keep-Alive → timeout=5, max=100
Server → Apache/2.4.20 (Ubuntu)

But still no luck. Please help.

Answer 1

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

Access-Control-Allow-Headers doesn't support wildcards. You are using * but must specify the allowed headers explicitly.

---

And I tried updating Access-Control-Allow-Headers header as the following.

Access-Control-Allow-Headers is a response header. You have to set it on your server, not your client.

Your client side JavaScript cannot give itself permission to read other people's data. That would make having the requirement to get permission pointless.

Answer 2

Try to put exactly domains in Access-Control-Allow-Origin, I also saw same issue And add whitelist plugin for cordova to your project

For Android Simulator use 10.0.2.2