Backbone model.destroy doesn't work but ajax delete call do

Question

I currently have an issue with the destroy method of backbone.

This is my model:

var FavoritePlace = Backbone.Model.extend({
    urlRoot: function() {
        return 'http://localhost:3000/api/1.0/users/' + this.userId + '/places';
    },
    initialize: function(userId) {
        this.userId = userId;
    }
});

This is the function that tries to delete in my view:

var placeToRemove = userFavoritePlaces.get(place);
    placeToRemove = new FavoritePlace({id : place.attributes.placeid});
    placeToRemove.userId = user.attributes.id;
    placeToRemove.destroy({
        success: function() {
            self.isFavorite(null);
        }
    });
    userFavoritePlaces.remove(placeToRemove);

I create a new FavoritePlace with the id attribute otherwise my model is considered as new and it won't even do the call.

My webapp runs on localhost:63342

When I look at the network tab in Chrome developper tools I can see that the call is sent to this URL:

Request URL:http://localhost:3000/api/1.0/users/8/places/2

The route server side looks like this:

router.delete('/users/:user_id/places/:place_id', function(req, res, next) {
    dataQuery.userDeletePlaceFromFavorite(req, function(err, result) {
        if (err) {
            req.stats.error = err;
            res.status(err.httpCode).json({error: err.error});
        }
        else {
            res.json(result);
        }

        next();
    })
});

I tried the same url in postman and it did work without any problems. Any idea why through Backbone it doesn't work ? Would it be related to any CORS headers or something alike ?

Thanks

// Edited Details of the call from network tab

curl 'http://localhost:3000/api/1.0/users/8/places/2?apikey=2yIsVhfg' -X OPTIONS -H 'Access-Control-Request-Method: DELETE' -H 'Origin: http://localhost:63342' -H 'Referer: http://localhost:63342/cmweb/index.html' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36' -H 'Access-Control-Request-Headers: accept' --compressed

Details of the call from postman

    Access-Control-Allow-Headers → X-Requested-With, origin, content-type, accept
Access-Control-Allow-Method → GET, POST, DELETE
Access-Control-Allow-Origin → *
Connection → keep-alive
Content-Length → 21
Content-Type → application/json; charset=utf-8
Date → Fri, 24 Jul 2015 17:35:31 GMT
Vary → Accept-Encoding
X-Powered-By → Express

On the same network tab of the devs-toolbar click on `copy as curl` and paste it here and the postman request too so we can see what's going on — Jaime Agudo, Jul 24 '15 at 17:24
What you copied from Postman is the response, not the request — Jaime Agudo, Jul 24 '15 at 18:28

score 1 · Accepted Answer · edited May 23 '17 at 12:21

I came across this other post: jQuery.ajax sending both OPTIONS and POST, how to handle with Express.js (Node.js) and it actually solved my problem.

My API was not answering correctly to the http options call made by my browser, so the DELETE call was never reaching my backend. The difference with Postman is that this option call is not made before the DELETE is send to the API. Now my backend respond with the proper headers to the options method and the DELETE call works exactly like in postman.

this is the code sample i added:

if (req.method === 'OPTIONS') {
        console.log('!OPTIONS');
        var headers = {};
        // IE8 does not allow domains to be specified, just the *
        // headers["Access-Control-Allow-Origin"] = req.headers.origin;
        headers["Access-Control-Allow-Origin"] = "*";
        headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS";
        headers["Access-Control-Allow-Credentials"] = false;
        headers["Access-Control-Max-Age"] = '86400'; // 24 hours
        headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept";
        res.writeHead(200, headers);
        res.end();
}

Backbone model.destroy doesn't work but ajax delete call do

1 Answers1