Default settings for all jQuery ajax calls

Question

I have a JS client (app.domain.com) that connects to an API written in rails and grape (api.domain.com). CORS is set up and I have a shared cookie between the two domains as the log in is performed on the api.domain.com server.

This JS application is using Spine.js so everything is written in CoffeeScript. So to send a delete request I just use:

    @item.destroy

This will send a DELETE request to the API. However the cookie is not sent along with the request header so I had to change the above line of code to this one:

    $.ajax({
        url: "http://api.domain.com/tasks/" + @item.id,
        type: "DELETE",
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        }
    })

And this works perfectly. It will send a response header "Access-Control-Allow-Credentials: true" along the request so the cookie is submitted and the action is authenticated.

However, this way I will have to write lines of code for each request which is really time consuming and also voids the benefits of the Spine framework.

I know that it's possible to set default ajax settings in jQuery so that every subsequent ajax call will be using these settings. So I've tried:

jQuery.ajaxSetup({
headers: {
    "X-Requested-With": "XMLHttpRequest",
    "Access-Control-Allow-Credentials": "true"
    }, crossDomain: true
});

Which are basically the same settings I would put for each ajax call manually. However this approach doesn't work though I see these headers in the request sent to the API (through firebug).

Am I missing something?

Thanks in advance!

Dav

Answer 1

Do this in the bootstrap of your client-side app:

$.ajaxSetup({
  xhrFields: {
    withCredentials: true
  }
})

Then the server needs to respond with this cors header:

Access-Control-Allow-Credentials: true

Answer 2

I recently had a very similar problem and found 2 simple ways of doing this. First create java script functions to make the calls for you i.e:

function delete (url){
   $.ajax({
        url: url,
        type: "DELETE",
        crossDomain: true,
        xhrFields: {
            withCredentials: true
        }
    })
}

or if being reused on multiple pages I would suggest creating a little class which could be included and reused easily. This also makes it possible to set more than just the default settings and create functions for frequently used api calls.