如何通过Ajax请求头发送API Key？无法确认是否成功发送

我尝试通过请求头发送API Key，而非将其放在GET/POST请求的data参数中。我已经尝试了代码里未注释的几种方式，但无法在控制台检查器中看到my_api_key参数及其值，不确定该请求头是否真的被发送（我曾在其他应用的控制台请求中看到过这类值）。

我的代码如下：

$.ajax({
  url: "https://api.github.com/users/jeresig",
  type: "GET",
  /*
   headers: { 'my_api_key': 'xxxx' },
  */
   beforeSend: function(request) {
    request.setRequestHeader("my_api_key", 'xxxx');
   },
  /*
  headers: {
  'Accept': 'application/json',
     'my_api_key':"xxxx"

   },   
  */
  dataType: "jsonp"
  //jsonpCallback: "logResults"
});

问题根源在于你用了jsonp作为dataType。JSONP本质是靠动态创建<script>标签发起请求，这种方式完全不支持自定义请求头——浏览器根本不会给script标签的请求附加自定义头，所以你设置的my_api_key根本发不出去，控制台自然看不到。

如果要发送自定义请求头，得改成普通AJAX请求（把dataType设为json），但前提是目标服务器支持CORS（跨域资源共享），允许你的域名跨域请求并携带自定义头。GitHub API是支持CORS的，你可以直接改代码：

$.ajax({
  url: "https://api.github.com/users/jeresig",
  type: "GET",
  headers: { 'my_api_key': 'xxxx' },
  dataType: "json"
});

改完之后，去浏览器控制台的“网络”面板找对应的请求，就能在请求头里看到my_api_key字段了。

要是你必须用JSONP（比如目标服务器不支持CORS），那没办法通过请求头发送API Key，只能把API Key放到URL参数或者POST请求体里。

内容的提问来源于stack exchange，提问作者user1249791