无法使用 jQuery 执行 POST 请求以获取 Strava OAuth 令牌

Posted 2023-03-04

【中文标题】无法使用 jQuery 执行 POST 请求以获取 Strava OAuth 令牌

【英文标题】：Unable to perform POST request using jQuery to obtain Strava OAuth token

【发布时间】：2016-03-25 17:09:15

【问题描述】：

我在尝试使用 Strava API 检索访问令牌时遇到问题：https://strava.github.io/api/v3/oauth/

我的初始代码请求和回调函数正常，但是当尝试点击/oauth/token URL 时，我以两种不同的方式失败。第一个：

        console.log('Posting to /token with code: ' + code);
        Ember.$.ajax(
            type: 'POST',
            url: 'https://www.strava.com/oauth/token',
            data: 'client_id=<myid>&client_secret=<mysecret>&code=' + code,
            success: function(data) 
                var jsonData = JSON.stringify(data);
                var accessToken = jsonData.access_token;
                console.log('Received access token: ' + accessToken);
                if (accessToken) 
                    this.get("controllers.application").set('settings.strava.accessKey', accessToken);
                
            ,
            error: function(jqXHR, textStatus) 
                console.log('API auth error occurred: ' + JSON.stringify(error));
                throw new Error(error);
            
        );

打印 Posting to /token with code: 3ae248f... 并且 HTTP 请求返回 200 响应（在 Chrome 调试器网络选项卡中），但我实际上无法查看调试器中的响应内容/数据，并且浏览器控制台抱怨：

XMLHttpRequest 无法加载 https://www.strava.com/oauth/token。不 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:4200” 访问。

但是，如果我在上述请求中添加一些选项：

        crossDomain: true,
        headers: 
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'DELETE, HEAD, GET, OPTIONS, POST, PUT',
            'Content-Type': 'application/json;charset=UTF-8'
        ,

然后OPTIONS 请求首先发出（到/oauth/token 端点），然后返回302 Found，但随后我在浏览器控制台中看到不同 错误：

XMLHttpRequest 无法加载 https://www.strava.com/oauth/token。预检响应无效（重定向）

CORS 不是我有大量经验的东西，这就是我没有想法的地方。

【问题讨论】：

这里好像不支持 CORS。你必须做这个服务器端

我正在使用 Strava API - 我不控制此服务器。而且 API 已经存在（并使用）了一段时间，所以我做错了。

这不是我的服务器。这是我要连接的第三方服务器。

你必须从你的服务器向api服务器发出请求

对 - 所以我的问题是，我需要做什么才能连接到这个 API？

【参考方案1】：

对于预检请求响应应以状态 200 Ok 结束并且至少包含 Access-Control-Allow-Origin: your origin

【讨论】：

这与我目前使用的通配符来源有何不同？ 'Access-Control-Allow-Origin': '*',

您应该在响应中得到它，而不是在您的请求中发送，它没有意义。

@CraigOtis，你的网站有后端应用吗？

这不是一个网站 - 它是一个在本地运行的 EmberJS 应用程序，并使用 jQuery 轮询 Strava API。

好的，我换个方式问。此代码是否在浏览器中运行？

【参考方案2】：

以下在我的 Cordova 应用程序中运行良好：

var c_id = "YOUR_ID_HERE";
var c_secret = "YOUR_SECRET_HERE";
var access_code = "YOUR_AUTH_HTTP_CODE_HERE";
var params = "client_id=" + c_id + "&client_secret=" + c_secret + "&code=" + access_code;

xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () 
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    alert(xmlhttp.responseText);
  


xmlhttp.open("POST", "https://www.strava.com/oauth/token", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);

【讨论】：

我们可以向 strava 发送注销请求吗？？

我不知道。但是您可以“忘记”应用端的令牌并按照第一次授权重新授权。

我想做的是当用户从我的应用程序中注销时，我想同时从我的应用程序和 strava 中注销用户。可以这样做吗？

不，我不知道。