Uber API 在 CORS 预检请求期间返回 404

Question

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

我知道这涉及 CORS，因为我的客户将直接通过 AJAX 访问优步 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 请求（提取规范中定义的 CORS 预检的一部分），Uber 似乎不支持。 Uber 的服务器应回复 headers，授权我的客户端完成其 API 请求。相反，他们返回 404。

总结：

Uber 的文档说他们支持 CORS。
我在 Uber 的开发者控制面板中正确设置了我的 Origin URI
CORS 规范指出，如果我正在使用授权 header 执行 HTTP POST，那是一个 non-simple 请求并且需要 HTTP OPTIONS 预检。
我的浏览器正是这样做的，使用包含 Origin header 的 HTTP 方法 OPTIONS 发送请求（与我的 Uber Developer Dashboard 中设置的 Origin URI 相匹配。）
Uber 正在返回状态 404（未找到）

有人知道这是怎么回事吗？

Answer 1

在浏览器中从前端 JavaScript 代码运行向优步 API 端点发出请求时，而不是向请求添加 Authorization header ，你需要在请求URL中添加一个access_token查询参数，像这样：

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's docs say they support CORS

是的，文档中的说法并不完全准确。

My browser is changing my HTTP POST into an HTTP OPTIONS request…

更准确地说：浏览器不会将 POST 更改为 OPTIONS；相反，浏览器在尝试您的 POST 请求之前执行 OPTIONS 请求 。浏览器这样做的原因是因为您的代码向请求添加了 Authorization header。

(part of the CORS preflight defined in the fetch spec), which it looks like Uber does not support

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

并且在浏览器中向来自前端 JavaScript 运行的请求添加 Authorization header 会导致浏览器执行预检 OPTIONS 请求。

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

Uber API 在 CORS 预检请求期间返回 404

Uber's API returning 404 during CORS preflight request

javascript

cors

http-status-code-404

http-options-method

uber-api