Calling remote services from Ionic Serve

This post is more than 2 years old.

A coworker pinged me today with an interesting question:

I am sure you may have encountered this error when using IONIC SERVE locally.

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

Essentially I am calling the URL via the $http.get() method from a factory. Ionic appears to have multiple ways to call REST services (1. $http or 2. ngResource).

So my question is do you have a workaround for this problem or a preferred way of dealing with / calling REST services from within Ionic? Any sample code would be appreciated.

This is a great question as there are multiple ways you can handle this. Before we begin, let's do a refresher. What is this error and why do we get it? Browsers have a security model in place that prevents an Ajax request from one domain to another. This is what led to the creation of JSON/P, which is essentially a workaround for calling remote services.

When working with Cordova, you don't have to worry about it. But when using Ionic Serve and running the application in the browser, you have to figure out a way around it. Even though using JSON/P is simple, I tend to try to avoid adding code to my Cordova/Ionic apps that are just for the purpose of making it run on the desktop browser. To be clear, I do it from time to time, but I try to avoid it. (And in fact, one of the answers below will involve just such a modification.) So given that, what are some options?

  1. Enable CORS
    Modern browsers support CORS, which is a way for a remote API to say it is acceptable for your code to call it from another domain. If you have access to the API (so you're building both the mobile side and the server side), than it is trivial to enable CORS for your API. How you do that depends on the language of course. I described how to do it in ColdFusion and you can enable it with Node.js/Express pretty quickly.

  2. Hack with an extension
    You can find a Chrome extension (Super Long URL to it here) that will modify CORS headers on the fly in your application. Obviously this is Chrome only, but I like that it works with zero changes anywhere at all.

  3. Ionic Serve Proxies
    Did you know Ionic Serve itself has a proxy feature? In their Testing in a Browser documentation page, they discuss how you can modify a setting in the ionic.project file to add a proxy. Here is an example.

  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
      "path": "/v1",
      "proxyUrl": ""

Once you've done that, a request to /v1 will be redirected locally through a proxy to This is a cool feature, but it does mean your code has to be changed. Note that you can simplify this a bit by checking for the browser platform as described here - Platform Classes - or by using ionic.Platform. Oops, scratch that! I naturally assumed if a CSS element was added to mark the browser platform then ionic.Platform would support it as well, but from what I can tell it does not. I filed issue 4306 for this.

Note - I did some quick testing on this, basically console.logging:


Oddly, inside Ionic's run block, even inside $ionicPlatform.ready, the class does NOT exist. It only exists in my first controller. This seems... wrong to me.

Ok, so more testing. In the docs for ionic.Platform, they mention a platforms array. You can do: ionic.Platform.platforms.contains("browser") to see if you are on a browser. So my issue 4306 there is a bit wrong. You can check - but it seems like an isBrowser helper utility should perhaps be available.

So - to wrap this up - you've got multiple different ways of handling this - some require some changes to your code, some do not. Find the one that works best for you and roll with it. :)

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Raymond Camden posted on 9/1/2015 at 7:31 PM

I considered mentioning this in the blog entry itself, but decided against it at the last minute. I thought I'd mention it here though. Chrome let's you pass a startup flag to allow for remote XHR requests: You would need to ensure you did that before you ran ionic serve though.

Comment 2 by Julian posted on 9/2/2015 at 2:04 PM

Recently I found the website which I think is worth mentioning. I usually use a variable named baseURL and make the value be and change that during production.

Sadly it does not work for POST.

Comment 3 (In reply to #2) by Raymond Camden posted on 9/2/2015 at 3:15 PM

That's a pretty cool service. Thank you for sharing it.

Comment 4 (In reply to #2) by Hemal Gondaliya posted on 4/28/2016 at 11:55 AM

but with this proxy when i trying to get image file if shows me internal server error 500, and its return type is always document

Comment 5 (In reply to #4) by Raymond Camden posted on 4/28/2016 at 1:19 PM

The proxy was meant for data-centric APIs. You should file a bug/ER with Ionic to suggest they support binary data.

Comment 6 by ali posted on 6/29/2016 at 6:18 PM
Comment 7 (In reply to #1) by Narayan Nyaupane posted on 3/16/2017 at 8:21 AM

I have used proxies in my project in this way
"name": "UNDP-App",
"app_id": "",
but when I run the command : ionic serve --lab
It does not load the proxy as shown in figure https://uploads.disquscdn.c...
What may be the problem??

Comment 8 (In reply to #7) by Raymond Camden posted on 3/16/2017 at 2:33 PM

Not sure. Ensure you are running the most recent version of the CLI, and if it still doesn't work, report the bug.

Comment 9 (In reply to #8) by Narayan Nyaupane posted on 4/6/2017 at 8:14 AM

ok thanks Raymond Camden