如何使用 jQuery 的 getJSON() 方法传递请求标头？答案

【问题标题】：How can I pass request headers with jQuery's getJSON() method?如何使用 jQuery 的 getJSON() 方法传递请求标头？
【发布时间】：2011-03-14 21:01:45
【问题描述】：

我需要做一个getJSON() 请求，但是如何传递授权和自定义标头？

我遇到了请求标头使用名称而不是值的问题。该 URL 正在通过提琴手中的手动请求显示，以作为选项而不是 GET/Url 插入。

这是我们正在尝试做的一个例子，它在 fiddler 中运行良好；如何使用 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

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

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 通过Ajax() 请求标头：

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

【问题讨论】：

如果您为 JSONP 服务执行此操作，则无法设置额外的标头。

标签： jquery getjson

【解决方案1】：

$.getJSON() 方法是简写，不允许您指定类似的高级选项。为此，您需要使用完整的$.ajax() 方法。

http://api.jquery.com/jQuery.getJSON/ 的文档中的通知：

这是一个简写的Ajax函数，相当于：

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

所以只需使用$.ajax() 并提供您需要的所有额外参数。

【讨论】：

【解决方案2】：

我认为您可以设置标题并仍然像这样使用 getJSON()：

$.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"); });

【讨论】：

来自文档 (api.jquery.com/jquery.ajaxsetup)：“不推荐使用它。”
@matt-burns，真的。我的解决方案会导致每个 jquery ajax 请求在标题中都有这两个值。我认为在这种情况下它是无害的。如果您使用 ajaxSetup() 设置 url 或请求类型，您可能会遇到问题。我会气馁。需要注意的事项。
在我的情况下，我实际上必须对所有 getJSON 调用使用相同的标头，所以这对我来说是一个很好的解决方案:)

【解决方案3】：

我同意 sunetos 的观点，即您必须使用 $.ajax 函数才能传递请求标头。为此，您必须为 beforeSend 事件处理程序编写一个函数，这是 $.ajax() 选项之一。以下是有关如何执行此操作的快速示例：

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

如果您运行上面的代码并在 Fiddler 等工具中观察流量，您会看到传入的两个请求标头：

值为 Foo 的安全代码
值为 Bar 的密钥

setHeader 函数也可以内联在 $.ajax 选项中，但我想把它叫出来。

希望这会有所帮助！

【讨论】：

请检查对原始帖子所做的更改（新问题）
我不确定我是否理解问题所在。标头键/值不应作为 URL 的一部分传递给服务，而是作为选项（如您所说）。您可以按照示例设置“securityCode”和“passkey”的方式设置 X-PartnerKey 和 Authorization（它们只是我编造的标题）。进行 $.ajax 调用时应设置 Host 和 User-Agent。对不起，如果我没有正确理解这个问题。如果您有源代码，请发布它，也许这会有所帮助。谢谢！
我已经设置了请求标头，就像您为示例所做的那样，但是在运行它并通过提琴手查看它之后，会出现标头的名称，但不会出现值。同样在提琴手中，我试图做一个 GET，它会显示为 GET/URL，但如果我将类型设置为 GET，它会显示为 OPTIONS/URL。希望这更有意义。我将发布源代码，但实际上与您的相同。再次感谢
这个也兼容IE和firefox吗？
现在您可以在headers 属性中定义您的标题。