Backbone Fetch Request is OPTIONS method

Question

I have a Backbone Collection object with the URL http://localhost:8080/api/menu/1/featured.

I am trying to perform a fetch operation to retrieve the collection from the URL and parse it. However, on the server side, the method type that I see for this request is OPTIONS. The server is only suppose to support GET method. I am not sure how Backbone is figuring out what method type to use, and why it changes to OPTIONS method type randomly sometimes. I am using a Node.js server to process the request. This code below is pretty much what I did.

var FeaturedCollection = Backbone.Collection.extend({
    model:FeaturedContent,
    url:function () { return url_featured; },
    parse:function (response) {
        console.log(response);
        return response;
    }
});

var featuredCollection = new FeaturedCollection();
featuredCollection.fetch();

Answer 1

It's been awhile, but I remember coming across this before. There's two things this could be: Backbone by default tried to do RESTful API calls to your backend, this means GET, POST, PUT, and DELETE.

Many backends weren't built with real REST support and only support GET and POST. When Backbone sends a PUT or DELETE command your browser (not Backbone) automatically sends an OPTIONS request first to see if it's allowed to make these kinds of requests. If your server answers improperly this call will fail and probably Backbone won't do anything.

To get around this set Backbone.emulateHTTP = true; Or have your server properly answer OPTIONS calls. See the documentation for more info: http://backbonejs.org/#Sync-emulateHTTP

The other issue is that you're making ajax requests cross-domain / sub-domain and you need to properly enable CORS. This also includes properly answering OPTIONS requests.

Answer 2

I had the exact same problem as OP - using Backbone and NodeJS to save data via a CORS POST request would constantly send an OPTIONS http request header, and not trigger the POST request at all.

Apparently CORS with requests that will "cause side-effects on user data" will make your browser "preflight" the request with the OPTIONS request header to check for approval, before actually sending your intended HTTP request method. https://developer.mozilla.org/en-US/docs/HTTP_access_control#Overview

This thread was what solved my problem - How to allow CORS?

The poster used some middleware to approve PUT/GET/POST/DELETE requests like so -

res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
...
next();

and the next(); would allow the OPTIONS check to continue on to the POST request.

Worked like a dream for me, hope it helps someone else too.

Answer 3

Backbone.js maps CRUD methods to HTTP. Taken from Backbone's source code:

var methodMap = {
  'create': 'POST',
  'update': 'PUT',
  'delete': 'DELETE',
  'read':   'GET'
};
Backbone.sync = function(method, model, options) {
   var type = methodMap[method];

Probably the problem resides on your node.js backend.