¿Cómo puedo agregar un encabezado HTTP personalizado a la solicitud ajax con js o jQuery?

Respuestas:

585

Existen varias soluciones según lo que necesite ...

Si desea agregar un encabezado personalizado (o un conjunto de encabezados) a una solicitud individual , simplemente agregue la headerspropiedad:

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

Si desea agregar un encabezado predeterminado (o un conjunto de encabezados) a cada solicitud , utilice $.ajaxSetup():

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Si desea agregar un encabezado (o conjunto de encabezados) a cada solicitud , use el beforeSendenlace con $.ajaxSetup():

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

Editar (más información): Una cosa a tener en cuenta es que con ajaxSetupusted solo puede definir un conjunto de encabezados predeterminados y solo puede definir uno beforeSend. Si llama ajaxSetupvarias veces, solo se enviará el último conjunto de encabezados y solo se ejecutará la última devolución de llamada anterior al envío.

Prestaul
fuente
¿Qué sucede si defino una nueva beforeSendcuando hago una $.ajax?
Kostas
3
Solo puede definir una beforeSenddevolución de llamada. Si llama $.ajaxSetup({ beforeSend: func... })dos veces, la segunda devolución de llamada será la única que se active.
Prestaul
1
Actualicé mi respuesta para agregar más detalles sobre ajaxSetup.
Prestaul
2
Parece que no funciona con CORS Request (todos los navegadores). ¿Hay alguna solución?
svassr
1
@ Si8, eso me parece un problema de dominio cruzado. No puede realizar una solicitud de un dominio a otro. Intenta mirar CORS y ver si eso ayuda.
Prestaul
54

O, si desea enviar el encabezado personalizado para cada solicitud futura, puede utilizar lo siguiente:

$.ajaxSetup({
    headers: { "CustomHeader": "myValue" }
});

De esta forma, cada solicitud ajax futura contendrá el encabezado personalizado, a menos que las opciones de la solicitud anulen explícitamente. Puedes encontrar más información ajaxSetup aquí

Szilard Muzsi
fuente
1
Donde realmente quiero lograr esto, esto no parece funcionar realmente.
Viaje el
1
Bueno, debe asegurarse de que se llame a ajaxSetup antes de la llamada ajax real. No sé de ninguna otra razón por la que esto no funcionaría :)
Szilard Muzsi
20

Suponiendo JQuery ajax, puede agregar encabezados personalizados como -

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});
Jayendra
fuente
19

Aquí hay un ejemplo usando XHR2:

function xhrToSend(){
    // Attempt to creat the XHR2 object
    var xhr;
    try{
        xhr = new XMLHttpRequest();
    }catch (e){
        try{
            xhr = new XDomainRequest();
        } catch (e){
            try{
                xhr = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                try{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }catch (e){
                    statusField('\nYour browser is not' + 
                        ' compatible with XHR2');                           
                }
            }
        }
    }
    xhr.open('POST', 'startStopResume.aspx', true);
    xhr.setRequestHeader("chunk", numberOfBLObsSent + 1);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            receivedChunks++;
        }
    };
    xhr.send(chunk);
    numberOfBLObsSent++;
}; 

Espero que ayude.

Si crea su objeto, puede usar la función setRequestHeader para asignar un nombre y un valor antes de enviar la solicitud.

James
fuente
2
Si bien esto puede haber sido correcto en 2011, generalmente es una buena idea no reinventar la rueda, y en su lugar usar una biblioteca AJAX como Zepto o jQuery.
Dan Dascalescu
44
A menos que esté intentando agregar un encabezado a una llamada XHR2 existente y no quiera comenzar a reescribirlo todo para usar jQuery solo para eso ... En ese momento, @gryzzly tiene la única respuesta viable.
roryhewitt
@AliGajani El problema es que ciertas aplicaciones o bibliotecas (como THREE.js) no usan $.ajax*funciones b / c, no dependen de jQuery y en su lugar usan XHR, por lo que esta es la única opción válida en esos casos.
Coburn
1
@AliGajani Además, no es solo el tiempo de carga de la red sino el tiempo de análisis de la biblioteca. Además, si no tiene cuidado con las dependencias que agrega, puede obtener rápidamente un proyecto con demasiadas dependencias
Oztaco - Reinstale Monica C.
19

También puede hacer esto sin usar jQuery. Anule el método de envío de XMLHttpRequest y agregue el encabezado allí:

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
var newSend = function(vData) {
    this.setRequestHeader('x-my-custom-header', 'some value');
    this.realSend(vData);
};
XMLHttpRequest.prototype.send = newSend;
Roland T.
fuente
12

Debe evitar el uso $.ajaxSetup()como se describe en los documentos . Use lo siguiente en su lugar:

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});
Stefan D.
fuente
6

Suponiendo que quiere decir "Al usar ajax" y "Un encabezado de solicitud HTTP ", use la headerspropiedad en el objeto al que pasaajax()

encabezados (agregado 1.5)

Defecto: {}

Un mapa de pares de clave / valor de encabezado adicionales para enviar junto con la solicitud. Esta configuración se establece antes de que se llame a la función beforeSend; por lo tanto, cualquier valor en la configuración de encabezados se puede sobrescribir desde la función beforeSend.

- http://api.jquery.com/jQuery.ajax/

Quentin
fuente
1

Puedes usar js fetch

Kamil Kiełczewski
fuente