¿Cómo puedo pasar encabezados de solicitud con el método getJSON () de jQuery?

76

Necesito hacer una getJSON()solicitud, pero ¿cómo paso la autorización y los encabezados personalizados?

Tengo problemas de que el encabezado de la solicitud está tomando el nombre, pero NO los valores. La URL se muestra a través de una solicitud manual en Fiddler para que se inserte como opciones en lugar de GET / Url.

Aquí hay un ejemplo de lo que estamos tratando de hacer que funciona bien en Fiddler; ¿Cómo puedo replicar esto con la función AJAX?

GET /Service.svc/logins/gdd53535342/houses/vxcbdfsdg/people/dsgsdggd?format=json HTTP/1.1
User-Agent: Fiddler
Authorization: Basic rgbg423535fa23y4436
X-PartnerKey: df3fgeg-g5g6-b55b-f3d2-dsgg353523
Host: 154.34.53.54:2757

Código JavaScript:

xhr = new XMLHttpRequest();

$(document).ready(function() {
  $.ajax({
    url: 'http://localhost:437/service.svc/logins/jeffrey/house/fas6347/devices?format=json',
    type: 'GET',
    datatype: 'json',
    success: function() { alert("Success"); },
    error: function() { alert('Failed!'); },
    beforeSend: setHeader       
  });   
});

function setHeader(xhr) {
  xhr.setRequestHeader('Authorization', 'Basic faskd52352rwfsdfs');
  xhr.setRequestHeader('X-PartnerKey', '3252352-sdgds-sdgd-dsgs-sgs332fs3f');
}

Encabezados de solicitud normales de Fiddler:

GET /service.svc/logins/jeffrey/house/fas6347/devices?format=json HTTP/1.1
User-Agent: Fiddler
Authorization: Basic faskd52352rwfsdfs
X-PartnerKey: 3252352-sdgds-sdgd-dsgs-sgs332fs3f
Host: localhost:437

Fiddler a través de Ajax()encabezados de solicitud:

OPTIONS service.svc/logins/jeffrey/house/fas6347/devices?format=json HTTP/1.1
Host: localhost:437
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Proxy-Connection: keep-alive
Origin: http://ipv4.fiddler:61975
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization,x-partnerkey
jquery getjson Berty
fuente
1
Si está haciendo esto para un servicio JSONP, no puede establecer encabezados adicionales.
Puntiagudo

Respuestas:

84

Estoy de acuerdo con sunetos en que tendrás que usar la función $ .ajax para pasar los encabezados de solicitud. Para hacer eso, tendrá que escribir una función para el controlador de eventos beforeSend, que es una de las opciones $ .ajax (). Aquí hay una muestra rápida de cómo hacerlo:

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $.ajax({
          url: 'service.svc/Request',
          type: 'GET',
          dataType: 'json',
          success: function() { alert('hello!'); },
          error: function() { alert('boo!'); },
          beforeSend: setHeader
        });
      });

      function setHeader(xhr) {
        xhr.setRequestHeader('securityCode', 'Foo');
        xhr.setRequestHeader('passkey', 'Bar');
      }
    </script>
  </head>
  <body>
    <h1>Some Text</h1>
  </body>
</html>

Si ejecuta el código anterior y observa el tráfico en una herramienta como Fiddler, verá dos encabezados de solicitud pasados:

  • securityCode con un valor de Foo
  • clave de paso con un valor de Bar

La función setHeader también podría estar en línea en las opciones $ .ajax, pero quería llamarla.

¡Espero que esto ayude!

David Hoerster
fuente
Verifique los cambios realizados en la publicación original (Nueva pregunta)
Berty
2
No estoy seguro de entender el problema. La clave / valores del encabezado deben pasarse al servicio no como parte de la URL, sino como opciones (como dijiste). Establecería X-PartnerKey y Authorization de la misma manera que el ejemplo estableció 'securityCode' y 'passkey' (que eran solo encabezados que inventé). El host y el agente de usuario deben configurarse cuando realiza la llamada $ .ajax. Lo siento si no entiendo bien el problema. Si tiene código fuente, publíquelo y tal vez eso ayude. ¡Gracias!
David Hoerster
1
He configurado los encabezados de solicitud de la misma manera que lo hizo para los ejemplos, pero después de ejecutar esto y verlo a través de Fiddler, aparecen los nombres de los encabezados, pero no los valores. También en Fiddler estoy tratando de hacer un GET que se mostraría como GET / URL pero si configuro el tipo en GET, aparece como OPTIONS / URL. Espero que eso tenga más sentido. Publicaré el código fuente, pero es prácticamente el mismo que el tuyo. Gracias de nuevo
Berty
¿También es esto compatible con IE y Firefox?
Berty
Sí, no hay nada específico sobre el código que lo vincula a IE o FF. Debe ser compatible con cualquier navegador que admita XmlHttpRequest. Probé en IE8 y FF 3.5.10.
David Hoerster
39

Creo que podría configurar los encabezados y aún usar getJSON () así:

$.ajaxSetup({
  headers : {
    'Authorization' : 'Basic faskd52352rwfsdfs',
    'X-PartnerKey' : '3252352-sdgds-sdgd-dsgs-sgs332fs3f'
  }
});
$.getJSON('http://localhost:437/service.svc/logins/jeffrey/house/fas6347/devices?format=json', function(json) { alert("Success"); });
Sean N.
fuente
4
De los documentos ( api.jquery.com/jquery.ajaxsetup ): "No se recomienda su uso".
Matt quema el
5
@ Matt-Burns, es cierto. Mi solución haría que cada solicitud de jquery ajax tuviera esos dos valores en los encabezados. Creo que en este caso es inofensivo. Podría tener problemas potencialmente si estuviera usando ajaxSetup () para establecer la URL o el tipo de solicitud. Eso lo desanimaría. Algo a tener en cuenta.
Sean N.
2
En mi caso, tengo que usar el mismo encabezado para todas las llamadas getJSON, así que esta es una buena solución para mí :)
marlar
15

El $.getJSON()método es una abreviatura que no le permite especificar opciones avanzadas como esa. Para hacer eso, necesita usar el $.ajax()método completo .

Aviso en la documentación en http://api.jquery.com/jQuery.getJSON/ :

Esta es una función Ajax abreviada, que es equivalente a:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

Así que utilice $.ajax()y proporcione todos los parámetros adicionales que necesite.

sunetos
fuente