javascript - the - El problema de Axios CORS con Github auth no obtiene el token de acceso

axios falta la cabecera cors access control allow origin

Question

He creado 2 rutas en mi aplicación React-Redux. Ya he agregado la configuración de las aplicaciones github con la página de inicio y la URL de devolución de llamada.

1. Cuando llegues a esta ruta: https://reduxapp.herokuapp.com/signin Haz clic en el botón de inicio de sesión de Github, ==> githubGeturi

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

Puede ver en la llamada de la red OPCIONES que la llamada pasa, pero la llamada POST nunca ocurre. y obtienes un error de consola:

XMLHttpRequest cannot load https://github.com/login/oauth/access_token?client_id=32b70bf671e04762b26c&…_secret=123456789123456789123456789&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.

A continuación se muestra mis funciones de acción:

const CLIENT_ID = ''32b70bf671e04762b26c'';
const CLIENT_SECRET = ''123456789123456789123456789'';
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))
);
};
}

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

Answer 1

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 hace eso cuando agrega encabezados adicionales para solicitar, pero la llamada POST también falla.

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