Impostazioni predefinite per tutte le chiamate jQuery ajax

Question

Ho un client JS (app.domain.com) che si collega a un'API scritta in rails e grape (api.domain.com). CORS è impostato e dispongo di un cookie condiviso tra i due domini poiché il log in viene eseguito sul server api.domain.com.

Questa applicazione JS utilizza Spine.js in modo che tutto sia scritto in CoffeeScript. Quindi, per inviare una richiesta di eliminazione mi basta usare:

@item.destroy 

Questo invierà una richiesta DELETE per l'API. Tuttavia il cookie non viene inviato insieme alla richiesta di intestazione così ho dovuto cambiare la riga di codice precedente a questo:

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

E questo funziona perfettamente. Invierà un'intestazione di risposta "Access-Control-Allow-Credentials: true" lungo la richiesta, quindi il cookie viene inviato e l'azione viene autenticata.

Tuttavia, in questo modo dovrò scrivere linee di codice per ogni richiesta che richiede molto tempo e vanifica anche i vantaggi del framework Spine.

So che è possibile impostare le impostazioni predefinite di Ajax in jQuery in modo che ogni successiva chiamata ajax utilizzi queste impostazioni. Così ho provato:

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

Quali sono fondamentalmente le stesse impostazioni che inserirò manualmente per ogni chiamata Ajax. Tuttavia questo approccio non funziona anche se vedo queste intestazioni nella richiesta inviata all'API (tramite firebug).

Mi manca qualcosa?

Grazie in anticipo!

Dav

Answer 1

Recentemente ho avuto un problema molto simile e ha trovato 2 modi semplici di fare questo. In primo luogo creare funzioni Java script per effettuare le chiamate per voi vale a dire:

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

o se essere riutilizzati su più pagine vorrei suggerire la creazione di un po 'di classe che potrebbero essere inclusi e riutilizzati facilmente. Ciò consente inoltre di impostare più di semplici impostazioni predefinite e di creare funzioni per le chiamate API frequenti.

Answer 2

fare questo nel bootstrap della vostra applicazione client-side:

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

Quindi il server deve rispondere con questo CORS intestazione:

Access-Control-Allow-Credentials: true