github oauth 上的 cors 问题

Posted 2023-03-04

【中文标题】github oauth 上的 cors 问题

【英文标题】：cors issue on github oauth

【发布时间】：2017-06-28 06:03:10

【问题描述】：

import request from 'superagent';

const self = this;
    request
      .post('https://github.com/login/oauth/access_token')
      .set('Content-Type', 'multipart/form-data')
      .query(
        client_id: CLIENT_ID,
        client_secret: CLIENT_SECRET,
        callback: 'http://127.0.0.1:3000/callback',
        code,
        state,
      )
      .end((err, res) => 
        const token = res.body.access_token;
        console.log(token);
        self.setToken(token);
      );

上面的代码会给我这样的错误

XMLHttpRequest 无法加载 https://github.com/login/oauth/access_token?client_id=112asdecf3805fdada12&…127.0.0.1%3A3000%2Fcallback&code=434ebd7bb98d9809bf6e&state=HelloWorld1234。 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://127.0.0.1:3000” 访问。

我不知道为什么即使我已经使用 github 注册了 oauth 应用程序并且回调 url 是 http://127.0.0.1:3000/callback

【问题讨论】：

understand CORS

【参考方案1】：

虽然所有the actual GitHub API endpoints support CORS 通过发送正确的响应标头，但a known issue 用于创建OAuth 访问令牌的https://github.com/login/oauth/access_token 端点不支持来自Web 应用程序的CORS 请求。

这种情况下非常具体的解决方法是使用https://github.com/prose/gatekeeper：

Gatekeeper：使客户端应用程序能够与 GitHub 共舞 OAuth。

由于一些与安全相关的限制，Github 阻止您在仅客户端应用程序上实施 OAuth Web 应用程序流程。

这真是太糟糕了。因此，我们构建了 Gatekeeper，这是您使其工作所需的缺失部分。

一般的解决方法是：使用开放的反向代理，例如 https://cors-anywhere.herokuapp.com/

var req = new XMLHttpRequest();
req.open('POST',
  'https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token',
  true);
req.setRequestHeader('Accept', 'application/json');
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send('code=' + encodeURIComponent(location.query.code) +
    '&client_id=foo' +
    '&client_secret=bar');
...

另见How to use Cors anywhere to reverse proxy and add CORS headers。

【讨论】：

用户在向不受信任的开放反向代理提供其客户端 ID 和机密方面应该有多关心？

@osowskit 显然他们应该关注。使用风险自负。如果代理的所有者想要从请求中记录凭据，他们可以。这就是为什么在他们自己的站点上运行 Gatekeeper 或其他这样的代理当然会更好。 （以及为什么我说开放反向代理是一个更“通用的解决方案”，用于解决不选择接收跨域 XHR/Fetch 请求的站点的 CORS 限制。）

或使用 AWS API Gateway 之类的东西来创建您自己的授权调用并为您的 client_secret 保密