Problema de Axios CORS con Github oauth Obtención de token de acceso

He creado 2 routes en mi aplicación React-Redux. He agregado la configuration de las aplicaciones github con la página principal y la URL de callback.

1. Cuando llegue a esta ruta: https://networkinguxapp.herokuapp.com/signin Haga clic en el button de inicio de session de Github, ==> githubGeturi

2. Github networkingirecciona con un código https://networkinguxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1 y se activa la acción githubSendCode ('9536286a59228e7784a1')

Se puede ver que en la llamada de networking se realiza la llamada OPCIONES, pero la llamada POST nunca ocurre. y obtienes un error de console:

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://networkinguxapp.herokuapp.com' is therefore not allowed access. 

A continuación están mis funciones de acción:

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

======== La única forma posible que encontré es realizar una llamada POST con el server. Puede ver la solución completa aquí: https://github.com/steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397fe31b61f22184d91

Parece que no puedes hacer una llamada a ese punto final a través de JavaScript

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

En su ejemplo, veo que la llamada al método OPTIONS falla, y esto se debe a que axios lo hace cuando agrega encabezados adicionales para solicitar, pero la llamada POST falla también.

Puede configurar un proxy entre su aplicación y github en su server, que simplemente reenvía sus requestes y responde con respuesta.

    Intereting Posts