Axios CORS Problem mit Github oauth Kein Zugriff Token

Question

Ich habe 2 Routen auf meiner React-Redux App erstellt. Ich habe github Anwendungen Einstellungen mit Homepage und Rückruf-URL bereits hinzugefügt.

1. Wenn Sie diesen Weg getroffen: https://reduxapp.herokuapp.com/signin Sie klicken auf Github Login-Button, ==>githubGeturi

2. Github Umleitungen mit einem Code zurück https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1 und githubSendCode ('9536286a59228e7784a1 ') Aktion wird ausgelöst

Sie können im Netzwerk Anruf OPTIONEN Anruf durchläuft, aber POST-Aufruf passiert nie. und Sie eine Konsole Fehler:

XMLHttpRequest cannot load https://github.com/login/oauth/access_token?client_id=32b70bf671e04762b26c&…_secret=5851623d94887db7612d4c9bc689310b9d53284b&code=9536286a59228e7784a1. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://reduxapp.herokuapp.com' is therefore not allowed access. 

Unten ist meine Aktionsfunktion:

const CLIENT_ID = '32b70bf671e04762b26c'; 
const CLIENT_SECRET = '5851623d94887db7612d4c9bc689310b9d53284b'; 
const ROOT_URL = window.location.origin; 
const REDIRECT_URL = `${ROOT_URL}/auth/callback`; 
const AUTHORIZE_URL = 'https://github.com/login/oauth/authorize'; 
const ACCESS_TOKEN_URL = 'https://github.com/login/oauth/access_token'; 
const STATE = _.random(10000); 

export function githubGeturi() { 
    const GITHUB_URL = `${AUTHORIZE_URL}?client_id=${CLIENT_ID}&scope=user,public_repo&redirect_uri=${REDIRECT_URL}`; 

    return (dispatch) => dispatch(signinUrl(GITHUB_URL)); 
} 

export function githubSendCode(code) { 
    const GITHUB_URL = `${ACCESS_TOKEN_URL}?client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}&code=${code}`; 

    axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'; 
    const axiosPost = axios.post(
    GITHUB_URL, 
    { 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded', 
     'Accept': 'text/json' 
    } 
    }); 

    return (dispatch) => { 
    dispatch(signinRequest()); 
    return axiosPost 
     .then(
     success => dispatch(signinSuccess(success)), 
     error => dispatch(signinError(error)) 
    ); 
    }; 
} 

======== Die einzig mögliche Weise, die ich gefunden ist POST Aufruf zum Server machen . Sie können die gesamte Lösung sehen hier: https://github.com/steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397fe31b61f22184d91

Answer 1

Es scheint, wie Sie nicht einen Anruf an diesem Endpunkt über JavaScript

https://github.com/isaacs/github/issues/330

Auf Ihrem Beispiel machen kann ich sehen, dass OPTIONS Methodenaufruf fehlschlägt, und das liegt daran, dass axios das tut, wenn Sie zusätzliche Header hinzufügen, die angefordert werden, aber der POST-Aufruf schlägt ebenfalls fehl.

Sie können einen Proxy zwischen Ihrer App und github auf Ihrem Server einrichten, der Ihre Anfragen und Antworten einfach mit Antwort weiterleitet.