1

我正在尝试在我的 JavaScript 客户端中使用 Uber API。

我知道这涉及 CORS，因为我的客户将直接通过 AJAX 访问 Uber API。

在 Uber Developers Dashboard 中，我正确设置了我的 Origin URI。然后，我设置了我能找到的最简单的例子。这来自 Uber 的文档：

<!DOCTYPE html>
<html>

<head>
    <title>Uber API Demo</title>
</head>

<body>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://api.uber.com/v1.2/products?latitude=37.7759792&longitude=-122.41823');
        xhr.setRequestHeader("Authorization", "Token <ServerToken>");
        xhr.send();
    </script>
</body>

</html>

查看 Chrome 开发工具中的控制台，这就是我所看到的：

开发工具控制台

而且，最有趣的是“网络”选项卡：

开发工具网络

我的浏览器正在将我的 HTTP POST 更改为 HTTP OPTIONS 请求（在 fetch 规范中定义的 CORS 预检的一部分），看起来 Uber 不支持。Uber 的服务器应该回复响应标头，授权我的客户端完成其 API 请求。相反，他们返回 404。

总之：

  • Uber 的文档说他们支持 CORS。
  • 我在 Uber 的开发者仪表板中正确设置了我的 Origin URI
  • CORS 规范说，如果我正在使用 Authorization 标头进行 HTTP POST，那是一个不简单的请求，并且需要 HTTP OPTIONS 预检。
  • 我的浏览器正是这样做的，使用 HTTP 方法 OPTIONS 发送请求，其中包含 Origin 标头（与我的 Uber Developer Dashboard 中设置的 Origin URI 匹配。）
  • Uber 正在返回状态 404（未找到）

有人知道这里发生了什么吗？

4

1 回答 1

1

当从浏览器中运行的前端 JavaScript 代码向 Uber API 端点发出Authorization请求时，您需要access_token在请求 URL 中添加查询参数，而不是向请求中添加标头，如下所示：

https://api.uber.com/v1.2/products?access_token=<TOKEN>&latitude=XXX&longitude=XXX

请参阅https://developer.uber.com/docs/trip-experiences/guides/authentication#use-bearer-token

Uber 的文档说他们支持 CORS

是的，文档在提出该声明时并不完全准确。

我的浏览器正在将我的 HTTP POST 更改为 HTTP OPTIONS 请求……</p>

更准确地说：浏览器没有将 ; 更改POST为OPTIONS; 相反，浏览器在尝试您的OPTIONS请求之前POST会发出请求。浏览器这样做的原因是因为您的代码Authorization在请求中添加了标头。

（在 fetch 规范中定义的 CORS 预检的一部分），看起来 Uber 不支持

正确的。这就是 Uber API 文档中声称他们支持 CORS 的说法并不完全准确的地方。他们实际上并不完全支持 CORS。具体来说，他们的 API 端点根本不支持处理 CORS 预检OPTIONS请求。

在浏览器中运行的前端 JavaScript 向请求中添加Authorization标头会导致浏览器执行预检OPTIONS请求。

因此，由于 Uber API 端点不支持这一点，您无法使用Authorization请求标头从前端 JavaScript 代码向 Uber API 端点发出请求以提供凭据。您需要将access_token查询参数添加到请求 URL。

于 2017-11-18T06:57:45.703 回答