Github oauth 的 Axios CORS 问题未获取访问令牌

本文介绍了Github oauth 的 Axios CORS 问题未获取访问令牌的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在我的 React-Redux 应用程序上创建了 2 个路由.我已经添加了带有主页和回调 URL 的 github 应用程序设置.

I have created 2 routes on my React-Redux app. I have added github applications settings with homepage and callback URL already.

1.当你点击这条路线时:https://reduxapp.herokuapp.com/signin你点击 Github 登录按钮，==> githubGeturi

1.When you hit this route : https://reduxapp.herokuapp.com/signinYou click on Github login button, ==> githubGeturi

2.Github 使用代码重定向回 https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1并且 githubSendCode('9536286a59228e7784a1') 动作被触发

2.Github redirects back with a code https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1and githubSendCode('9536286a59228e7784a1') action is triggered

您可以在网络调用中看到 OPTIONS 调用通过，但 POST 调用从未发生.然后你得到一个控制台错误:

You can see in network call OPTIONS call goes through, but POST call never happens. and you get a console error:

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.

以下是我的动作函数:

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

========我发现的唯一可能的方法是使用服务器进行 POST 调用.你可以在这里查看整个解决方案:https://github.com/steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397fe31b61f22184d91" rel="noreferrer">https://github.com/steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397

========The only possible way I found is make POST call with server.You can view the entire solution here: https://github.com/steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397fe31b61f22184d91

ReduxWeatherApp

Github oauth 的 Axios CORS 问题未获取访问令牌

问题描述

推荐答案