GitHub OAuth 上的跨域问题

Question

GitHub OAuth 上的跨域问题

16

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

- Taweerat Chaiman

1

了解CORS（跨域资源共享） - Jaromanda X

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sideshowbarker · Accepted Answer

虽然所有实际的GitHub API端点通过发送正确的响应头支持CORS, 但https://github.com/login/oauth/access_token端点用于创建OAuth访问令牌的不支持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');
...

请参阅如何使用Cors anywhere进行反向代理并添加CORS标头。