我如何在浏览器的 reddit api 中使用 oauth？

Question

我所做的一切都不起作用，而且我不断收到荒谬的 CORS 错误和其他问题。我只想宣誓通过浏览器让用户登录。我想使用 snoowrap，但我什至无法使用它，因为我需要一个刷新令牌。

我已经授权该应用程序并从 API 获取 'code'，然后我应该通过向 https://www.reddit.com/api/v1/access_token 发出 post 请求来使用它。

但我每次都收到 CORS 错误。

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

代码：

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

我什至不明白为什么某些东西会阻止我对 public api

执行 POST 请求

Answer 1

经过几个小时的搜索，我找到了解决方案：

如果您正在创建 browser-only JS 应用程序（无服务器），您应该 select 在 reddit console.

然后您必须发送授权 header，其值为您的客户 ID，如此处所述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,
  });

我如何在浏览器的 reddit api 中使用 oauth？

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

javascript

api

oauth

reddit