web-dev-qa-db-fra.com

Problème Axios CORS avec Github oauth Pas d'obtention du jeton d'accès

J'ai créé 2 itinéraires sur mon application React-Redux. J'ai déjà ajouté les paramètres des applications github avec la page d'accueil et l'URL de rappel.

1. Lorsque vous cliquez sur cette route: https://reduxapp.herokuapp.com/signin Vous cliquez sur le bouton de connexion Github, ==> githubGeturi

2. Github redirige avec un code https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1 et githubSendCode ('9536286a59228e7784a1') l'action est déclenchée

Vous pouvez voir dans l'appel réseau OPTIONS que l'appel passe, mais POST ne se produit jamais. Et vous obtenez une erreur de console:

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.

Voici mes fonctions d'action: 

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 seule façon possible que j'ai trouvée est de faire POST appeler avec le serveur. Vous pouvez voir la solution complète ici: https://github.com/ steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397fe31b61f22184d91

javascriptgithuboauthcorsaxios
21
STEEL

Il semble que vous ne puissiez pas appeler ce point de terminaison via JavaScript

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

Sur votre exemple, je vois que l'appel de la méthode OPTIONS échoue, et c'est parce qu'axios le fait lorsque vous ajoutez des en-têtes supplémentaires à la demande, mais POST échoue également.

Vous pouvez configurer un proxy entre votre application et github sur votre serveur qui transmet simplement vos demandes et réponses avec réponse.

6
Burimi