Wie kann ich Anforderungsheader mit der Methode getJSON () von jQuery übergeben?

76

Ich muss eine getJSON()Anfrage stellen, aber wie übergebe ich Autorisierungen und benutzerdefinierte Header?

Ich erhalte Probleme, dass der Anforderungsheader den Namen, aber NICHT die Werte annimmt. Die URL wird durch eine manuelle Anforderung in Fiddler angezeigt, als Optionen anstelle von GET / Url eingefügt zu werden.

Hier ist ein Beispiel dafür, was wir versuchen, was bei Geigern gut funktioniert. Wie kann ich dies mit der AJAX-Funktion replizieren?

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

JavaScript-Code:

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');
}

Fiddler Normal Request Headers:

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 Through Ajax()Request Headers:

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
quelle
1
Wenn Sie dies für einen JSONP-Dienst tun, können Sie keine zusätzlichen Header festlegen.
Pointy

Antworten:

84

Ich stimme Sunetos zu, dass Sie die $ .ajax-Funktion verwenden müssen, um Anforderungsheader zu übergeben. Dazu müssen Sie eine Funktion für den beforeSend-Ereignishandler schreiben, die eine der Optionen $ .ajax () ist. Hier ist ein kurzes Beispiel dafür:

<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>

Wenn Sie den obigen Code ausführen und den Datenverkehr in einem Tool wie Fiddler beobachten, werden zwei Anforderungsheader angezeigt:

  • securityCode mit dem Wert Foo
  • Passkey mit dem Wert Bar

Die setHeader-Funktion könnte auch in den $ .ajax-Optionen inline sein, aber ich wollte sie aufrufen.

Hoffe das hilft!

David Hoerster
quelle
Bitte überprüfen Sie die Änderungen am ursprünglichen Beitrag (Neue Frage)
Berty
2
Ich bin mir nicht sicher, ob ich das Problem verstehe. Der Header-Schlüssel / die Header-Werte sollten nicht als Teil der URL, sondern als Optionen (wie Sie sagten) an den Service übergeben werden. Sie würden X-PartnerKey und Authorization so einstellen, wie im Beispiel 'securityCode' und 'passkey' festgelegt wurden (dies waren nur Header, die ich erstellt habe). Host und User-Agent sollten festgelegt werden, wenn Sie den Aufruf $ .ajax tätigen. Entschuldigung, wenn ich das Problem nicht richtig verstehe. Wenn Sie Quellcode haben, posten Sie ihn bitte und vielleicht hilft das. Vielen Dank!
David Hoerster
1
Ich habe die Anforderungsheader genauso eingerichtet wie für die Beispiele, aber nachdem Sie dies ausgeführt und über Fiddler angezeigt haben, werden die Namen der Header angezeigt, nicht jedoch die Werte. Auch in Fiddler versuche ich ein GET zu machen, das als GET / URL angezeigt wird, aber wenn ich den Typ auf GET setze, wird es als OPTIONS / URL angezeigt. Hoffe das macht mehr Sinn. Ich werde den Quellcode veröffentlichen, aber er ist praktisch der gleiche wie der Ihre. Nochmals
vielen
Ist dies auch mit IE und Firefox kompatibel?
Berty
Ja, der Code ist nicht spezifisch und nicht an IE oder FF gebunden. Es sollte mit jedem Browser kompatibel sein, der XmlHttpRequest unterstützt. Ich habe auf IE8 & FF 3.5.10 getestet.
David Hoerster
39

Ich denke, Sie könnten die Header setzen und trotzdem getJSON () wie folgt verwenden:

$.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.
quelle
4
Aus den Dokumenten ( api.jquery.com/jquery.ajaxsetup ): "Die Verwendung wird nicht empfohlen."
Matt brennt
5
@ Matt-Burns, stimmt. Meine Lösung würde dazu führen, dass jede jquery ajax-Anforderung diese beiden Werte in den Headern enthält. Ich denke in diesem Fall ist es harmlos. Sie könnten möglicherweise auf Probleme stoßen, wenn Sie ajaxSetup () verwenden, um die URL oder den Anforderungstyp festzulegen. Das würde ich entmutigen. Etwas zu beachten.
Sean N.
2
In meinem Fall muss ich tatsächlich den gleichen Header für alle getJSON-Aufrufe verwenden, daher ist dies eine gute Lösung für mich :)
Marlar
15

Die $.getJSON()Methode ist eine Kurzform, mit der Sie solche erweiterten Optionen nicht angeben können. Dazu müssen Sie die vollständige $.ajax()Methode verwenden.

Hinweis in der Dokumentation unter http://api.jquery.com/jQuery.getJSON/ :

Dies ist eine Kurzform der Ajax-Funktion, die entspricht:

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

Verwenden $.ajax()Sie also einfach alle zusätzlichen Parameter, die Sie benötigen, und geben Sie sie an.

Sunetos
quelle