¿Alguien sabe cómo añadir o crear un encabezado HTTP personalizado con JavaScript o jQuery?

InformationsquelleAutor Txugo | 2011-10-07

9 Comentarios

  1. 561

    Hay varias soluciones dependiendo de lo que necesites…

    Si quieres agregar un encabezado personalizado (o un conjunto de encabezados) a una petición individual, a continuación, añadir la de headers propiedad:

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

    Si quieres agregar un encabezado predeterminado (o un conjunto de encabezados) a cada solicitud, a continuación, utilizar $.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 quieres agregar un encabezado (o un conjunto de encabezados) a cada solicitud, a continuación, utilizar la beforeSend gancho 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 info): Una cosa a tener en cuenta es que con ajaxSetup sólo se puede definir un conjunto predeterminado de encabezados y sólo puede definir una beforeSend. Si usted llama ajaxSetup varias veces, sólo el último conjunto de encabezados será enviado y sólo el último antes de enviar de devolución de llamada se va a ejecutar.

    • ¿Qué sucede si debo definir un nuevo beforeSend cuando se realiza una $.ajax?
    • Sólo puede definir una beforeSend de devolución de llamada. Si usted llama $.ajaxSetup({ beforeSend: func... }) dos veces, a continuación, la segunda devolución de llamada será el único que desencadena.
    • Actualizado mi respuesta a añadir más detalles acerca de ajaxSetup.
    • Hola a todos, encabezados: { ‘x-mi-custom-header’: ‘valor’ } no funciona en IE 8. funciona bien en firefox y chrome. Tengo que enviar los encabezados personalizados usando IE 8. Tiene usted alguna idea para hacer que funcione? Thx
    • están tratando de hacer una cruz de dominio (CORS) solicitud o algún otro tipo de encabezado personalizado? Ciertamente he utilizado todas estas técnicas en IE8 y estoy seguro que ellos trabajan. La única excepción es xDomain solicitudes en las que se necesita otra técnica en IE8.
    • thx por tu respuesta. Mi petición ajax está en el mismo dominio. $(document).ready(function() { $.ajax({ url: url, tipo: «POST», encabezados: { ‘x-mi-custom-header’: ‘valor’ } }); });
    • Creo que debe haber algo más en el exterior de la publicado el código (posiblemente en el lado del servidor cuando se trata de leer los encabezados). su llamada ajax se ve a la derecha y creo que no voy a ser capaz de ayudar a usted aquí.
    • Parece que no funciona con CORS Solicitud (todos los navegadores). Hay un trabajo de todo ?
    • encontré mi solución aquí stackoverflow.com/questions/8685678/…
    • CORS tiene diferentes requisitos y, como se descubrió, más allá de unos pocos (muy básico) de las cabeceras, cualquier adicional tendrá que ser incluido en la lista blanca a través de la Access-Control-Request-Headers encabezado.
    • Para mi caso, yo quería el encabezado http accept valor estrictamente sólo text/plain. ajax accepts comportamiento realmente se tropezó conmigo. Se mantuvo añadiendo un extra */* al final, después de mi text/plain. Suspiro. La especificación de la headers funciona mejor.
    • Me sale este error: Respuesta a la comprobación previa petición de no pasar el control de acceso de verificación
    • que se parece a una cruz de dominio de problema para mí. Usted no puede hacer una solicitud de un dominio a otro. Pruebe a buscar en CORS y ver si eso ayuda.

  2. 52

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

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

    De esta manera cada futuro petición ajax va a contener el encabezado personalizado, a menos que expresamente anulada por las opciones de la solicitud. Usted puede encontrar más información sobre ajaxSetup aquí

    • Donde realmente quiero lograr esto, esto no parece funcionar.
    • Así que usted debe asegurarse de que el ajaxSetup se llama antes de la llamada ajax. No sé de ninguna otra razón por la que esto no iba a funcionar 🙂
  3. 19

    Suponiendo ajax de JQuery, puede agregar encabezados personalizados como

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

    He aquí un ejemplo de uso de 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 utilizar el setRequestHeader función para asignar un nombre y un valor antes de enviar la solicitud.

    • Si bien esto puede haber sido correcta en 2011, es generalmente una buena idea para no reinventar la rueda, y en lugar de utilizar una biblioteca de AJAX como Zepto o jQuery.
    • A menos que usted está tratando de agregar un encabezado a una ya existente XHR2 llamada y no quiero empezar a reescribir todo el uso de jQuery solo por eso… momento En el cual, @gryzzly tiene la única respuesta viable.
    • El problema es que ciertas aplicaciones o bibliotecas (como THREE.js) no utilizar $.ajax* funciones b/c que no dependen de jQuery y en lugar de usar XHR así que esta es la única opción válida en estos casos.
    • Además, no es sólo la carga de la red el tiempo, pero el análisis de tiempo de la biblioteca. Además, si usted no es cuidadoso con lo que las dependencias de agregar, usted puede obtener rápidamente un proyecto con muchas dependencias
  5. 17

    También se puede hacer esto sin el uso de jQuery. Reemplazar XMLHttpRequest método de envío y agregar 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;
  6. 12

    Usted debe evitar el uso de $.ajaxSetup() como se describe en el docs. Utilice el siguiente lugar:

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

    Suponiendo que te refieres a «Cuando el uso de ajax» y «HTTP Solicitud de cabecera», a continuación, utilizar la headers de la propiedad en el objeto que se le pasa ajax()

    encabezados(añadir 1.5)

    Predeterminado: {}

    Un mapa de encabezado adicional pares clave/valor a enviar junto con la solicitud. Esta configuración se establece antes de la beforeSend se llama a la función; por lo tanto, los valores de las cabeceras de la configuración puede ser sobrescrito desde dentro de la beforeSend función.

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

  8. 1

    Puede utilizar js fetch

    JS:

    async function send(url,data) {
      let r= await fetch(url, {
            method: "POST", 
            headers: {
              "My-header": "abc"  
            },
            body: JSON.stringify(data), 
      })
      return await r.json()
    }
    
    //Example usage
    
    let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=my-header';
    
    async function run() 
    {
     let jsonObj = await send(url,{ some: 'testdata' });
     console.log(jsonObj[0].request.httpMethod + ' was send - open chrome console > network to see it');
    }
    
    run();

Dejar respuesta

Please enter your comment!
Please enter your name here