【问题标题】:Uber's API returning 404 during CORS preflight request优步的 API 在 CORS 预检请求期间返回 404
【发布时间】:2018-05-01 22:06:33
【问题描述】:

我正在尝试在我的 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 开发人员仪表板中设置的 Origin URI 匹配。)
  • Uber 正在返回状态 404(未找到)

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

【问题讨论】:

  • 当所有其他方法都失败时,在您控制的服务器上设置代理

标签: javascript cors http-status-code-404 uber-api http-options-method


【解决方案1】:

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

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 请求……

更准确地说:浏览器不会将POST 更改为OPTIONS;取而代之的是浏览器在尝试您的POST 请求之前执行OPTIONS 请求。浏览器这样做的原因是因为您的代码在请求中添加了Authorization 标头。

(在 fetch 规范中定义的 CORS 预检的一部分),看起来 Uber 不支持

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

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

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

【讨论】:

    猜你喜欢
    • 2022-01-25
    • 2013-10-24
    • 2020-03-19
    • 2019-01-13
    • 2020-11-18
    • 2019-12-12
    • 1970-01-01
    • 2014-01-16
    • 1970-01-01
    相关资源
    最近更新 更多