cors问题在github oauth上 [英] cors issue on github oauth

问题描述

< pre-class =snippet-code-js lang-js prettyprint-override> 从'superagent'导入请求; const self = this;请求.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

解决方案

尽管所有实际的GitHub API端点通过发送正确的响应头来支持CORS ，它是一个已知问题 https://github.com/login/oauth/用于创建OAuth访问令牌的端点access_token 不支持来自Web应用程序的CORS请求。

这种情况的具体解决方法是使用< a href =https://github.com/prose/gatekeeper =nofollow noreferrer> https://github.com/散文/看门人：

网守：允许客户端应用程序通过GitHub跳舞OAuth。

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

这真是一个无赖。因此，我们构建了Gatekeeper，这是你需要的一块工具。

一般的解决方法是：使用open反向代理，如 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来反向代理并添加CORS头 。

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

The code above will give me an error like this

XMLHttpRequest cannot load https://github.com/login/oauth/access_token?client_id=112asdecf3805fdada12&…127.0.0.1%3A3000%2Fcallback&code=434ebd7bb98d9809bf6e&state=HelloWorld1234. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3000' is therefore not allowed access.

I have no idea why even though I've registered the oauth application with github and callback url is http://127.0.0.1:3000/callback

解决方案

While all the actual GitHub API endpoints support CORS by sending the right response headers, it is a known issue that the https://github.com/login/oauth/access_token endpoint for creating an OAuth access token does not support CORS requests from Web applications.

The very specific workaround for this case is to use https://github.com/prose/gatekeeper:

Gatekeeper: Enables client-side applications to dance OAuth with GitHub.

Because of some security-related limitations, Github prevents you from implementing the OAuth Web Application Flow on a client-side only application.

This is a real bummer. So we built Gatekeeper, which is the missing piece you need in order to make it work.

The general workaround is: Use an open reverse proxy like 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');
...

See also How to use Cors anywhere to reverse proxy and add CORS headers.

这篇关于cors问题在github oauth上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！