CORS問題

Question

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 &碼= 434ebd7bb98d9809bf6e & state = HelloWorld1234。 請求的 資源上沒有「Access-Control-Allow-Origin」標題。原因'http://127.0.0.1:3000'因此不允許 訪問。

我不知道爲什麼即使我已經註冊了github上和回調URL中的OAuth應用http://127.0.0.1:3000/callback

Answer 1

雖然所有the actual GitHub API endpoints support CORS通過發送正確的響應頭，它是a known issue的​​端點創建OAuth訪問令牌不支持來自Web應用程序的CORS請求。

這種情況下的非常具體的解決方法是使用https://github.com/prose/gatekeeper：

看門人：啓用客戶端應用程序來跳舞的OAuth與GitHub上。

由於一些安全相關的限制，Github阻止您在僅客戶端應用程序上實現OAuth Web應用程序流。

這是一個真正的無賴。所以我們建造了Gatekeeper，這是你爲了使其工作所需的缺失部分。

一般的解決方法是：使用一個開放的反向代理等也How to use Cors anywhere to reverse proxy and add CORS headershttps://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'); 
... 

見。