Unable to perform POST request using jQuery to obtain Strava OAuth token

Question

I'm encountering an issue while trying to retrieve an access token using the Strava API: https://strava.github.io/api/v3/oauth/

My initial code request and callback function properly, but when attempting to hit the /oauth/token URL I fail in two different ways. The first:

        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);
            }
        });

Prints Posting to /token with code: 3ae248f... and the HTTP request comes back with a 200 response (in the Chrome debugger Network tab), but I can't actually see the response contents/data in the debugger, and the browser console complains with:

XMLHttpRequest cannot load https://www.strava.com/oauth/token . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:4200 ' is therefore not allowed access.

But then if I add a few options to my above request:

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

Then an OPTIONS request goes out first (to the /oauth/token endpoint), and comes back with 302 Found , but I then see a different error in the browser console:

XMLHttpRequest cannot load https://www.strava.com/oauth/token . Response for preflight is invalid (redirect)

CORS is not something I have a huge amount of experience with, this is where I have run out of ideas.

Answer 1

The following works fine in my Cordova App:

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);

Answer 2

对于预检请求，响应的最终状态应为200 OK，并且至少包含Access-Control-Allow-Origin: your origin