How I do use oauth in the reddit api in browser?

Question

Nothing I do works, and I keep getting ridiculous CORS errors and other things. I just want to do a normal oath to log a user in, through the browser. I want to use snoowrap, but I can't even get far enough to use it, because i need a refresh token.

I already authorize the app and get the 'code' back from the API, which im then supposed to use by making a post request to https://www.reddit.com/api/v1/access_token.

But I just get CORS errors every time.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.reddit.com/api/v1/access_token. (Reason: missing token ‘access-control-allow-headers’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.reddit.com/api/v1/access_token. (Reason: CORS request did not succeed).

code:

const redirect_uri = 'https://EXAMPLE.com/reddit/';
const client_id = 'xxxxxxxxxxxxx';
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString); /*global URLSearchParams*/
const code = urlParams.get('code');

var snoowrap = window.snoowrap;






if (code) {
    console.log('code gotten', code);

    const data = {
        grant_type: 'authorization_code',
        code: code,
        redirect_uri: redirect_uri
    };

    ajax('https://www.reddit.com/api/v1/access_token', data, 'Basic client_id:', result => {
        console.log(result);

        const r = new snoowrap({
            userAgent: 'skeddit',
            clientId: client_id,
            clientSecret: 'fFP-6BKjFtvYpIkgFGww-c6tPkM',
            refreshToken: '',
        });

        r.getHot().map(post => post.title).then(console.log);
    });
}



//GET:  ajax(String url, Function success)
//POST: ajax(String url, Object postData, Function success)

function ajax(url, arg2, arg3, arg4) {
  if (typeof arg2 == 'function')
    var success = arg2;
  else {
    var postData = arg2;
    var headers = arg3;
    var success = arg4;
  }

  console.log('AJAX - STARTING REQUEST', url)

  //start new request
  var xhttp = new XMLHttpRequest({mozSystem: true});
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      success(JSON.parse(this.response));
      xhttp = null;
      console.log('AJAX - COMPLETE', this.response);
    }
  };

  if (postData) {
    //post request
    console.log('post data: ', postData);
    var formData = new FormData();

    for ( var key in postData ) {
      formData.append(key, postData[key]);
    }

    xhttp.open("POST", url, true); 
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.setRequestHeader("Authorization", headers);
    xhttp.send(formData);
  }
  else {
    //get request
    xhttp.open("GET", url, true); 
    xhttp.send();
  }

  return xhttp;
}

I don't even understand why something would prevent me from doing a POST request to a public api

Answer 1

After hours of searching I found a solution:

If you're creating a browser-only JS app (no server), you should select your app type as "installed app" (instead of "web app") in the reddit console.

Then you have to send an Authorization header whose value is your Client Id, as stated here reddit/wiki/OAuth2

  const fd = new FormData();
  fd.append("code", code);
  fd.append("grant_type", "authorization_code");
  fd.append("redirect_uri", "your_redirect_uri");

  const r = await fetch("https://www.reddit.com/api/v1/access_token", {
    headers: {
      Authorization:
        "Basic " + btoa(unescape(encodeURIComponent(CLIENT_ID + ":" + ""))),
    },
    method: "POST",
    body: fd,
  });