Aggiungi intestazione in richiesta AJAX con jQuery

Question

Vorrei aggiungere un'intestazione personalizzata a una richiesta POST AJAX da jQuery.

Ho provato questo:

$.ajax({ 
    type: 'POST', 
    url: url, 
    headers: { 
     "My-First-Header":"first value", 
     "My-Second-Header":"second value" 
    } 
    //OR 
    //beforeSend: function(xhr) { 
    // xhr.setRequestHeader("My-First-Header", "first value"); 
    // xhr.setRequestHeader("My-Second-Header", "second value"); 
    //} 
}).done(function(data) { 
    alert(data); 
}); 

Quando invio questa richiesta e guardo con Firebug, vedo questa intestazione:

OPZIONI xxxx/yyyy HTTP/1.1
Host: 127.0 .0.1: 6666
Agente utente: Mozilla/5.0 (Windows NT 6.1; WOW64; rv: 11.0) Gecko/20100101 Firefox/11.0
Accettare: text/html, application/xhtml + xml, application/xml; q = 0.9, /; q = 0,8
Accept-Language: fr, fr-fr, q = 0,8, en-us; q = 0,5, it; q = 0,3
Accept-Encoding: gzip, deflate
Connection: keep -alive
origine: null
Access-Control-Request-Metodo: POST
Access-Control-Request-Header: mia-prima-header, my-seconda intestazione
Pragma: no-cache
Cache-Control: no-cache

Perché i miei intestazioni personalizzate vanno a Access-Control-Request-Headers:

di controllo degli accessi-request-intestazioni: mia-prima-header, my-seconda intestazione

mi aspettavo un valori di intestazione come questo:

My-First-Header: primo valore
My-seconda-Header: secondo valore

È possibile?

Answer 1

Quello che hai visto in Firefox non era la richiesta effettiva; si noti che il metodo HTTP è OPTIONS, non POST. In realtà è stato la richiesta di 'pre-volo' che il browser fa a determinare se una richiesta AJAX cross-domain dovrebbe essere consentito:

http://www.w3.org/TR/cors/

L'intestazione di controllo degli accessi-request-intestazioni nel pre-volo richiesta include l'elenco delle intestazioni nella richiesta effettiva. Si prevede quindi che il server riporti se queste intestazioni sono supportate in questo contesto o meno, prima che il browser invii la richiesta effettiva.

Answer 2

Ecco un esempio come impostare una richiesta di intestazione in una chiamata JQuery Ajax:

$.ajax({ 
    type: "POST", 
    beforeSend: function(request) { 
    request.setRequestHeader("Authority", authorizationToken); 
    }, 
    url: "entities", 
    data: "json=" + escape(JSON.stringify(createRequestObject)), 
    processData: false, 
    success: function(msg) { 
    $("#results").append("The result =" + StringifyPretty(msg)); 
    } 
}); 

Answer 3

Questo codice di seguito funziona per me. Uso sempre solo parentesi singole e funziona perfettamente. Suggerisco di utilizzare solo parentesi singole o solo parentesi doppie, ma non mescolate.

$.ajax({ 
    url: 'YourRestEndPoint', 
    headers: { 
     'Authorization':'Basic xxxxxxxxxxxxx', 
     'X_CSRF_TOKEN':'xxxxxxxxxxxxxxxxxxxx', 
     'Content-Type':'application/json' 
    }, 
    method: 'POST', 
    dataType: 'json', 
    data: YourData, 
    success: function(data){ 
     console.log('succes: '+data); 
    } 
    }); 

Spero che questo risponda alla tua domanda ...

Answer 4

Ed è per questo che non è possibile creare un bot con Javascript, perché le opzioni sono limitate a ciò che il browser ti permette di fare. Non puoi semplicemente ordinare un browser che segue la politica CORS, seguita dalla maggior parte dei browser, per inviare richieste casuali ad altre origini e consentire di ottenere la risposta in modo semplice!

Inoltre, se si è tentato di modificare manualmente alcune intestazioni delle richieste come origin-header dagli strumenti degli sviluppatori forniti con i browser, il browser rifiuterà la modifica e potrebbe inviare una richiesta di preflight OPTIONS.

Answer 5

Prova ad usare rack-cors gemma. E aggiungi il campo di intestazione nella tua chiamata ajax.