ionic problem No 'Access-Control-Allow-Origin'

Question

I'm working on an ionic apps. My problem is: when I try to get data from server I got this:

XMLHttpRequest cannot load https://mywebsite.com/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

I already try to add this to .htaccess:

<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
</ifModule>

And this to my api page (PHP): header('Access-Control-Allow-Origin: *');

but still not working

$http.get(url).success(function(response) {...}

Answer 1

Put it on top of your PHP file like:

<?php
header("Access-Control-Allow-Origin: *");
// then your stuff goes here

?>

Note: as with all uses of the PHP header function, this must be before any output has been sent from the server.

Answer 2

This cors problem has a simple work around in ionic.

Go to your ionic.config.json (previously ionic.project) and add a proxy for example:

{
  "name": "proxy-example",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://cors.api.com/api"
    }
  ]
}

After that use "/api/" instead of "https://mywebsite.com/api" when you call your api.

For more info:

http://blog.ionic.io/handling-cors-issues-in-ionic/