在JavaScript中使用授权标头

Question

我是一个完全的新手，刚开始学习API。我正在尝试使用Yelp API，但似乎无法访问它。 根据文档，我应该在请求头中将API密钥放置为“Authorization: Bearer”。 我对授权不熟悉，也不确定是否做得正确。以下是我的内容：

    function displayYelp() {
  var URL =
    "https://api.yelp.com/v3/businesses/search?term=restaurant&latitude=40.82783908257346&longitude=-74.10162448883057";

  $.ajax({
    url: URL,
    method: "GET",
    headers: {
      authorization:
        "bearer //My Key Goes Here",
    },
  }).then(function(response) {
    console.log(response);
  });
}

即使您无法回答我的具体问题，任何有关“授权”（Authorization）相关的帮助都将不胜感激！

- Ariel Solano

---

当您运行此代码时，是否从API获取数据？如果是，则说明您正在正确执行。上面的代码看起来很好。您正在将Authorization: bearer [your API bearer token]作为HTTP标头与请求一起发送到服务器。如果请求存在问题，服务器将使用错误消息和HTTP代码2xx以外的代码进行响应。RFC并不是我所说的轻松阅读，但它应该包含您需要了解有关OAuth承载令牌身份验证的所有内容。 - Alex W

Вадим Джамиев 发布了一个 回答，说：“..这是您上一个问题的解决方案：当尝试从REST API获取数据时，请求的资源上不存在'Access-Control-Allow-Origin'标头” - Scratte

Answer 1

Authorization 头经常被用于使用令牌进行API身份验证。您可以在这里阅读更多有关令牌认证的信息。您可能想尝试添加错误处理程序，以便查看问题所在：

$.ajax({
  url: URL,
  method: "GET",
  headers: {
    "Authorization":
      "Bearer //My Key Goes Here",
  },
}).then(function(response) {
  console.log(response);
}).catch(function(err) {
  console.error(err);
});

为了符合正确的头格式，您可能还需要将 "Authorization" 和 "Bearer" 大写。否则，您的 ajax 调用看起来是正确的！

- Taylor Briggs

---

谢谢您的帮助！我收到了这样的消息："加载失败：预检请求的响应未能通过访问控制检查：所请求的资源上不存在'Access-Control-Allow-Origin'标题。因此，来自'null'源的访问被拒绝。该响应具有HTTP状态代码403。"这是否意味着我使用了错误的密钥或其他原因？ - Ariel Solano

Answer 2

我看到你的评论，你在预检过程中遇到了问题。 API 请求在预检期间被阻止的原因是 Yelp 没有发送 Access-Control-Allow-Origin 标头。 因为他们不发送此标头，您将无法进行跨域 AJAX 请求。

在 GitHub 上搜索后，我发现了几个来源支持 Yelp API 由于 CORS 安全问题而不支持客户端 JavaScript：

CORS 问题 Fetch API 无法加载 https://api.yelp.com #25

api.yelp.com 是否支持客户端 JS 的 Access-Control-Allow-Origin 标头？#99

这意味着您需要使用服务器端方法来使用该 API。 免责声明：我看到有关 JSONP 方法的提及，但尚未找到有效示例。

- Alex W

---

非常感谢！我是个初学者，所以我需要做更多的研究甚至才能理解如何做lol。感谢您的解释！ - Ariel Solano