Making simple REST calls to web service using Ajax CORS

Hi,

I am creating a front-end application that heavily relies on REST web services in different domains… What is the best way to make such calls that also works on mozilla and chrome…

I tried simple Ajax calls but Mozilla doesn’t seem to like them.

In fact, CORS is created not for messing up with developers, you shouldn’t make a monkey patch but actually you need to resolve the issue - you remote host should allow it (by that allow-thing-and-something-else header in the response).

@umpri5450 are your webservices from an external provider or are they your own? Usually CORS needs to be implemented on the server (the web service side) with a special header to allow your origin (e.g. Access-Control-Allow-Origin header needs to be implemented and set either to “*” meaning wilcard or to your domain).

Mozilla is a good resource here: Cross-Origin Resource Sharing (CORS) - HTTP | MDN Alternatively a good book on CORS: CORS in Action

If however you do not have control over the web-services and they do not offer things like the above mentioned maybe they support JSONP which basically puts a closure around the request so that it can be used by your application.

By the way: if you have multiple data sources maybe ember-data may not be suitable because it requires a very specific format. Unless you know what you are doing (the words custom Serializer and Adapter shouldnt be new to you) you may better of with using the Ember-encapsulated jquery command Ember.$.getJSON()

I hope this helps :wink:

1 Like

@Libermentix Yeah i actually learned about this concept or CORS and JSONP while waiting for replies on this thread.

I am trying to consume web services from different domains, so Ember-Data is really not suitable.

However to use Ember.$.getJSON(), don’t we need to add some headers before sending the request such as “Access-Control-Allow-Origin”: ‘*’ and/or "Authorization : "?? It doesn’t work on my server but normal Ajax request does though.

BTW thanks for taking the time to reply!! :smiley:

@umpri5450 : It heavily depends on which services you want to add. Maybe you give some details on that.

Usually big services such as google, yahoo and such allow you to use their API and they have setup the appropriate headers (Access-Control-Allow-Origin, Access-Control-Allow-Methods and Access-Control-Allow-Headers)

If you control the different services yourself, you need to support a so called pre-flight OPTIONS request that basically sends the details of what you are allowed to do. This is implemented in the newer browsers. Without that or if it fails the browser usually falls back to a UNAUTHORIZED response which you cannot programmatically differentiate from an UNAUTHORIZED of the server.

This mechanism is supposed to protect users from accidentally being spied on. Since both the application (ember in this case) and the server need to clearly define what is allowed and what not.

With Ember.$.getJSON you can invoke/parse JSONP callback which is why it might serve you well. In some of my projects I used bower package ic-ajax as it is more Ember friendly (it wraps the jquery in a promise API).