Backbone model.destroy doesn't work but ajax delete call do
I am currently having a problem with the method to destroy the trunk.
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 is trying to remove in my opinion:
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 id attribute, otherwise my model is considered new and it won't even be called.
My webapp is running on localhost: 63342
When I look at the network tab in Chrome dev tools, I see that a call is being sent to this url:
Request url: http: // localhost: 3000 / api / 1.0 / users / 8 / places / 2
The server side of the routing 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 worked without issue. Any idea why this doesn't work with Backbone? Will this be related to any CORS headers or something similar?
thank
// Edited Call details 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 calling the 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
source to share
I came across this other post: jQuery.ajax sending both OPTIONS and POST how to handle Express.js (Node.js) and that actually solved my problem.
My API was not responding correctly to the http parameter call made by my browser, so the DELETE call never made it to my backend. The difference with Postman is that this option call is not made until the DELETE is sent to the API. Now my backend responds with appropriate headers to the options method, and the DELETE call works exactly the same as in the postman.
this is the sample code 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();
}
source to share