使用jQuery的$.getJSON调用外部API报错，$.ajax却正常工作求助

嘿，我来帮你理清这个问题的根源和解决方案～

你遇到的情况很典型：$.getJSON是jQuery封装的快捷方法，但它不支持直接设置自定义请求头，而你调用的Propublica API必须通过X-API-Key请求头来做身份验证，这就是为什么$.ajax能正常工作，而getJSON不行的核心原因。

为什么会这样？ #

$.getJSON本质是$.ajax()的语法糖，它默认帮你设置了type: "GET"和dataType: "json"，但它的参数设计里没有预留设置请求头的位置，所以没办法像$.ajax那样直接传入headers配置项。

解决方案 #

方案1：继续使用已验证有效的$.ajax方法

这是最稳妥的方式，因为它支持完整的配置参数，包括自定义请求头，你现有的代码已经可以正常工作，不需要改动：

var apiKey = 'myKey', 
    requestURL = 'https://api.propublica.org/congress/v1/115/senate/members.json'; 

$.ajax({ 
  url: requestURL, 
  type: "GET", 
  dataType: 'json', 
  headers: {'X-API-Key': apiKey } 
}).done(function(data){ 
  console.log(data) 
});

方案2：封装自己的带请求头的getJSON方法

如果你偏好getJSON的简洁调用方式，可以自己封装一个支持请求头的函数，兼顾简洁性和需求：

// 封装自定义方法
function getJSONWithHeaders(url, headers, successCallback) {
  $.ajax({
    url: url,
    type: "GET",
    dataType: "json",
    headers: headers,
    success: successCallback
  });
}

// 调用示例
var apiKey = 'myKey', 
    requestURL = 'https://api.propublica.org/congress/v1/115/senate/members.json';

getJSONWithHeaders(requestURL, {'X-API-Key': apiKey }, function(data) {
  console.log(data);
});

方案3：全局设置请求头（不推荐）

你可以用$.ajaxSetup()全局配置请求头，但这种方式会影响所有后续的jQuery Ajax请求，可能引发意料之外的问题，除非你确定不会有其他请求冲突：

var apiKey = 'myKey', 
    requestURL = 'https://api.propublica.org/congress/v1/115/senate/members.json';

// 全局设置请求头
$.ajaxSetup({
  headers: {'X-API-Key': apiKey }
});

// 现在可以用getJSON了
$.getJSON(requestURL, function(data) {
  console.log(data);
});

总结 #

优先选择方案1或方案2，既能满足API的身份验证需求，又能避免全局配置带来的潜在问题。

内容的提问来源于stack exchange，提问作者Dorotea Del Toboso De La Cruz