Making REST call from Ionic

Hi there, i am really new on Ionic. First of all thanks for the great work.
I am trying to do my first app, converting a mobile website i already have.
Designing the interface with Ionic is really simple, but i am new also to Angularjs.
I was trying to make REST call to my backend, but i can’t find how.
I mean i make the $http.get call to my url on a local vhost, the firebug console says
200OK for the response, but it’s red. I mean the problem is with the crossdomain ajax call.
Is there a workaround, or which is the best way to try it?
I am running the Ionic app with Python webserver, because i prefer testing the app in browser than in simulator because it’s faster for developing.
Thanks.
Faibo.

For allowing CORS, try to set the below header values, with node.js + express server , it is something like this.

app.options(/\.*/, function (req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type");
        res.header('Access-Control-Allow-Methods', 'GET, POST, DELETE, PUT');
        res.send(200);
    });

where app is var app = express();

Hi, thanks for the response, i am googling about CORS to better understand the problem and trying to solve it.
My question now is? Is my approach in developing wrong? I mean i do not think i am the only one who’s trying to make REST calls in his Ionic app. Does everyone meets this problem or usually developer use the simulator so they do not meet CORS problems? Sorry if some of my question could be stupid, but i am really new to native app programming.
Thanks

These are problems specific to AngularJS in general. They aren’t made better or worse by Ionic. Look at these:



http://better-inter.net/enabling-cors-in-angular-js/
http://blog.bulte.net/12-24-2013/angular-wordpress-cors.html

If you are using iOS, you also need to consider limiiting resources in your config.xml file. By default, it is wide open - not very safe.

You should probably limit it like :

    <access origin="http://myAppsApiUrlGoesHere.com" />
3 Likes

Thanks to everyone, i managed to do it, so now i’m continuing to develop my first ionic app:)

how did you manage to get it working? I have the same issue when trying to connect to a remote DB using pouchDB.

Hi, I’m having the same problems, and I thought that there should be a Cordova plugin that can be used to make a native call to avoid the cross domain restriction, since I think that if you develop a native app you won’t have that restriction. From my java background I belive that calling an external service from java (in an Android App) shouldn’t be that difficult. And there must be a plugin to wrap that functionality.

Right now I’m trying to figure out how to make this plugin work: http://plugins.cordova.io/#/package/plugin.http.request

Anyone have used it?

I will only add remark which might help somebody. If you are testing an app with your web browser by using ‘ionic serve’ then you have to take for CORS problem by your self, e.g. by running new chrome instance with --disable-web-security (it’s not safe so don’t run it this way with your main instance where you are logged in to your mailbox).

I have added a feature request here: https://github.com/driftyco/ionic-cli/issues/139

You can try this:
http://ionicinaction.com/how-to-fix-cors-problems-and-no-access-control-allow-origin-header-errors-with-ionic/
or this
http://ionicinaction.com/how-to-fix-cors-issues-revisited/

I tried everything under the sun to get this to work, and the only thing that did for me was running behind a proxy as described in this article. Hope this helps. Ill do my best to help others get this working as it was a true pain and I had to debug all POSTs via device.

Please don’t do this. This makes the server wide-open for CSRF attacks from any domain.

In chrome add cors extensions so you can allow CORS while testing.

Installing the Chrome extension Allow-Control-Allow-Origin: * solved my problem.
angelorigo thanks for your solution. :wink: