ionic probleme 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 : Header set Access-Control-Allow-Origin: *

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

but still not working

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

Answer 1

This is a typical error found when we work with Angular and Ionic, the problem appears because when your app loaded in a browser on your app loads all the content from an origin that comes from your local address http://localhost:8100, then when you want to make any AJAX request sent out to another host than localhost:8100 the request is called from an any point different from the origin its require a CORS(Cross Origin Resource Sharing) preflight request to see if it can access the resource.

The solution is use a Proxy To Backend, with this you can highjack certain urls and send them to a backend server. The implementation is easy:

1.- Modify the file ionic.config.json in the root folder of your project.

2.- Configure your proxy, inside your ionic.config.json file put this, assuming your new host is in http://localhost:3000.

   "proxies": [
{
  "path": "/endpoints",
  "proxyUrl": "http://localhost:3000"
}
  ]

3.- In your Service change a little the path of your request from this http://localhost:3000/endpoints/any/path/that/you/use to this ../endpoints/any/path/that/you/use(assuming the another host is in localhost:3000 and the context is /endpoints)

If you need more information about this please check http://blog.ionic.io/handling-cors-issues-in-ionic/

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/

Answer 3

premise: This issue is usually only running ionic serve, or using ionic as web app, not in ionic as app.

You can avoid to modify your project and use an extension to disable CORS:

For developing with chrome, something like this:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

or, if you need it for firefox, something like this:

https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

IE and Edge sucks so for these you have to manually disable CORS in settings

Answer 4

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.