Companies House API jquery ajax 返回 401答案

【问题标题】：Companies House API jquery ajax returning 401Companies House API jquery ajax 返回 401
【发布时间】：2018-11-16 11:33:34
【问题描述】：

我正在尝试从 gov.uk 公司内部 API 返回 json，但我得到了 401

加载资源失败：服务器响应状态为 401（未授权）

我正在使用 ajax() 方法使用 jQuery，我的代码如下所示：

var chApiKey = "{{MYAPIKEY}}:";
var company_number = "09963675";

$.ajax({
  async: false,
  url: "https://api.companieshouse.gov.uk/company/",
  type: "GET",
  crossDomain: true,
  contentType: "application/json",
  data: company_number,
  dataType: 'jsonp',
  success: function(data) {
    //Response text
    alert(data);
  },
  beforeSend: function(xhr) {
    xhr.withCredentials = true;
    xhr.setRequestHeader("Authorization", make_base_auth(encodeURIComponent(chApiKey)))
    // xhr.setRequestHeader ("Authorization", make_base_auth(chApiKey))
  },
  error: function() {
    //Gat failure
    console.log("error");
  }
});

function make_base_auth(user) {
  // var user = user + ":"
  console.log("the api is: " + user)
  var hash = btoa(user);
  return "Basic " + hash;
  // console.log("Basic " + hash + ":");
}

gov.uk 上的说明允许您使用有效的 API 密钥进行测试。我还在终端中使用 curl 命令返回了 json

curl -u{{MYAPIKEY}}: https://api.companieshouse.gov.uk/company/09963675

【问题讨论】：

您的代码看起来不错，除了使用需要删除的async: false。检查他们的文档以确保您正确编码 API 密钥，并且您的 API 密钥是有效的。
$.ajax 允许你指定username 和password 作为参数，你不需要自己创建授权头。所以尝试使用那些（为密码指定一个空字符串），看看你是否得到不同的结果。
我认为您的网址中包含?（例如“api.companieshouse.gov.uk/company?09963675"”）
密钥似乎是有效的，使用他们的 curl 示例我得到了预期的 json 响应。我看不到有关对密钥进行编码的方法的任何详细信息。他们只是说使用没有密码的基本 html 身份验证。删除 async 参数对 auth 错误没有影响。从 jsonp 切换到 json 会触发 CORS 错误，所以我暂时坚持使用 jsonp。我还尝试将用户名和密码作为选项传递，而不是设置标题，但身份验证错误仍然存在。

标签： javascript jquery ajax

【解决方案1】：

可能您获得的 URL 与您预期的不同（?，因为这就是在对 URL 的 GET 请求中附加 data 的方式。

您需要将company_number 添加到URL（并适当地删除dataType: 'jsonp'）：

url: "https://api.companieshouse.gov.uk/company/" + company_number,

下面的片段在 3 种情况下显示了您的请求的 URL：

您当前的代码
dataType: 'jsonp' 删除后的代码
company_number 直接添加到url

var chApiKey = "{{MYAPIKEY}}:";
var company_number = "09963675";

$.ajax({
  async: false,
  url: "https://api.companieshouse.gov.uk/company/",
  type: "GET",
  crossDomain: true,
  contentType: "application/json",
  data: company_number,
  dataType: 'jsonp',
  success: function(data) {
    //Response text
    alert(data);
  },
  beforeSend: function(xhr, settings) {
    console.log("dataType: 'jsonp' :", settings.url)
    xhr.withCredentials = true;
    xhr.setRequestHeader("Authorization", make_base_auth(encodeURIComponent(chApiKey)))
    // xhr.setRequestHeader ("Authorization", make_base_auth(chApiKey))
  },
  error: function() {
    //Gat failure
    //console.log("error");
  }
});

function make_base_auth(user) {
  // var user = user + ":"
  //console.log("the api is: " + user)
  var hash = btoa(user);
  return "Basic " + hash;
  // console.log("Basic " + hash + ":");
}

$.ajax({
  async: false,
  url: "https://api.companieshouse.gov.uk/company/",
  type: "GET",
  crossDomain: true,
  contentType: "application/json",
  data: company_number,
  success: function(data) {
    //Response text
    alert(data);
  },
  beforeSend: function(xhr, settings) {
    console.log("dataType: 'jsonp' removed  :", settings.url)
    xhr.withCredentials = true;
    xhr.setRequestHeader("Authorization", make_base_auth(encodeURIComponent(chApiKey)))
    // xhr.setRequestHeader ("Authorization", make_base_auth(chApiKey))
  },
  error: function() {
    //Gat failure
    //console.log("error");
  }
});

$.ajax({
  async: false,
  url: "https://api.companieshouse.gov.uk/company/" + company_number,
  type: "GET",
  crossDomain: true,
  contentType: "application/json",
  success: function(data) {
    //Response text
    alert(data);
  },
  beforeSend: function(xhr, settings) {
    console.log("company number added in url  :", settings.url)
    xhr.withCredentials = true;
    xhr.setRequestHeader("Authorization", make_base_auth(encodeURIComponent(chApiKey)))
    // xhr.setRequestHeader ("Authorization", make_base_auth(chApiKey))
  },
  error: function() {
    //Gat failure
    //console.log("error");
  }
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

该api返回结果而不附加查询？这是他们的 curl 示例，显示了这个'curl -uYOUR_APIKEY_FOLLOWED_BY_A_COLON：api.companieshouse.gov.uk/company{company_number}'参考页面：link
该示例没有查询参数，尽管他们这样称呼它。查询参数添加在? 之后（如yoururl.com/subpage?paramname=paramvalue），但在该示例中没有?。您的company_number 应该添加到url，因为在您的示例中，url 和此“查询参数”之间有/。你点击Run code snippet了吗？这将向您显示您请求的网址（顺便说一句。可能您应该将“授权”标头传递为"Basic " + btoa(user + ":")我没有在我的回答中关注它）

【解决方案2】：

在https://developer.companieshouse.gov.uk 应用设置中，一个字段标记为：JavaScript 域 必须：

包括端口号（如果使用）
不能是本地主机

对于本地安装，请更新主机文件并更新应用设置中的 JavaScript 域。

我犯了一个错误，没有在这个字段中包含 :3000。所以我的本地域是http://ch-test.com，但应该是http://ch-test.com:3000，因为我的http服务器在端口3000上运行。

其他人的反馈也发生了变化

数据类型：'jsonp'， => 数据类型：'json'，

异步：真， => 异步：假，

【讨论】：