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

Question

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

\n\n

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

\n\n

但我每次都会收到 CORS 错误。

\n\n

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 \xe2\x80\x98access-control-allow-headers\xe2\x80\x99 in CORS header \xe2\x80\x98Access-Control-Allow-Headers\xe2\x80\x99 from CORS preflight channel).\n\nCross-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).\n

\n\n

代码：

\n\n

const redirect_uri = \'https://EXAMPLE.com/reddit/\';\nconst client_id = \'xxxxxxxxxxxxx\';\nconst queryString = window.location.search;\nconst urlParams = new URLSearchParams(queryString); /*global URLSearchParams*/\nconst code = urlParams.get(\'code\');\n\nvar snoowrap = window.snoowrap;\n\n\n\n\n\n\nif (code) {\n    console.log(\'code gotten\', code);\n\n    const data = {\n        grant_type: \'authorization_code\',\n        code: code,\n        redirect_uri: redirect_uri\n    };\n\n    ajax(\'https://www.reddit.com/api/v1/access_token\', data, \'Basic client_id:\', result => {\n        console.log(result);\n\n        const r = new snoowrap({\n            userAgent: \'skeddit\',\n            clientId: client_id,\n            clientSecret: \'fFP-6BKjFtvYpIkgFGww-c6tPkM\',\n            refreshToken: \'\',\n        });\n\n        r.getHot().map(post => post.title).then(console.log);\n    });\n}\n\n\n\n//GET:  ajax(String url, Function success)\n//POST: ajax(String url, Object postData, Function success)\n\nfunction ajax(url, arg2, arg3, arg4) {\n  if (typeof arg2 == \'function\')\n    var success = arg2;\n  else {\n    var postData = arg2;\n    var headers = arg3;\n    var success = arg4;\n  }\n\n  console.log(\'AJAX - STARTING REQUEST\', url)\n\n  //start new request\n  var xhttp = new XMLHttpRequest({mozSystem: true});\n  xhttp.onreadystatechange = function() {\n    if (this.readyState == 4 && this.status == 200) {\n      success(JSON.parse(this.response));\n      xhttp = null;\n      console.log(\'AJAX - COMPLETE\', this.response);\n    }\n  };\n\n  if (postData) {\n    //post request\n    console.log(\'post data: \', postData);\n    var formData = new FormData();\n\n    for ( var key in postData ) {\n      formData.append(key, postData[key]);\n    }\n\n    xhttp.open("POST", url, true); \n    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");\n    xhttp.setRequestHeader("Authorization", headers);\n    xhttp.send(formData);\n  }\n  else {\n    //get request\n    xhttp.open("GET", url, true); \n    xhttp.send();\n  }\n\n  return xhttp;\n}\n

\n\n

我什至不明白为什么有些东西会阻止我向公共 api 发出 POST 请求

\n

Answer 1

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

如果您要创建仅浏览器的 JS 应用程序（无服务器），则应在reddit 控制台中将应用程序类型选择为“已安装应用程序”（而不是“网络应用程序”）。

然后，您必须发送一个授权标头，其值为您的客户端 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,
  });