2

I am a noob to javascript and specially Backbone.js I am following this tutorial and tweaked the models and urls to my own Rest Services(JaxRS). However, on running the app in browser (Chrome) gives me the following error XMLHttpRequest cannot load http://localhost:1232/abc. Origin null is not allowed by Access-Control-Allow-Origin

On searching for some solutions over this error,

  1. i read on a post on SO to start the chrome with the parameters --allow-file-access-from-files – However, i am not sure about this method. And neither i could try this due to some reasons.
  2. Also i read that in plain javascript, such kind of issues are usually handled using an xmlDomainObject. But this is not a case with backbone.

So what i am looking for, is some method by which i can solve the issue through backbone itself. Also i dont understand, why this kind of issue was not addressed in any of the tutorials on using backbone with RestApi

Himanshu Soni
  • 264
  • 8
  • 15
  • If you have python installed on your machine, you can create a little web server by cding into your directory and then typing "python -m SimpleHTTPServer", therefore you should have that directory available under http://localhost:8080 and make full use of the http protocol. – S.C. Jan 30 '13 at 14:11

2 Answers2

2

This has nothing to do with Backbone specifically. You are loading the page with a file:/// URL and the problem is an AJAX Cross Origin request.

There are ways around it - you could load your web pages through your server which is running the REST services. Alternatively, you could allow cross origin requests. I'll let you search for how to do that.

EDIT If you are developing a PhoneGap application, you will not have the issue once you actually run the application since it will not complain about cross origin requests. At that point it is a local app so the request is not cross-origin. The way to get around that at development time is the --allow-file-access flag which you said you could not get to work. You need to make sure to close any other open Chrome windows and then start a new instance with that flag.

codemonkey
  • 5,257
  • 2
  • 18
  • 16
  • The reason i doubt about backbone is because in all the tutorials i referred to, i couldn't find any ajax calls. So i assumed , backbone is handling the cross origin requests. I found a way through, i had to override the collections.fetch and used an ajax call with datatype as jsonp. – Himanshu Soni Jan 30 '13 at 13:58
  • Backbone is not taking in charge any Cross Origin Request. You should give a look at the documentation or at the backbone souorce code. – S.C. Jan 30 '13 at 14:12
  • You don't really need to override any method or use jsonp. If you don't want to run a web server to serve the pages you could still allow cross origin requests on your REST API as I've mentioned in my answer. If you don't want to do that either then you can use jsonp. – codemonkey Jan 30 '13 at 14:31
  • The reason i opted for jsonp rather than modify code on the server is because i want the client to handle the issue. Let me clarify what i am trying to build over here. This is a phonegap application with backbone for MVC with JQM for UI. The server implements JaxRS. And i am new to all the technologies, since i recently shifted from android. If you have any other suggestions, i gladly welcome them. The more aspects i cover, the better i can tweak these components. – Himanshu Soni Jan 30 '13 at 19:39
  • Answer updated - you don't need to override the methods for a PhoneGap app – codemonkey Jan 31 '13 at 11:25
1

You can use JSONP in your ajax call which allows cross origin requests

Read more at here and here

EDIT :

Using jsonp expects back a json object, and it does not work with xml. So mayb you need to wrap your XML into json before sending from the server, or parse your xml to json.

this, this and this may prove helpful :)

Community
  • 1
  • 1
Mandeep Jain
  • 2,304
  • 4
  • 22
  • 38
  • The problem solved using jsonp. Though the jsonp attempt returns the xml, but causes the Resource interpreted as Script but transferred with MIME type application/xml. error. Any pointers ? I checked the server reponse, no issues on that side. – Himanshu Soni Jan 30 '13 at 19:50