Github oauth 的 Axios CORS 问题未获取访问令牌 [英] Axios CORS issue with Github oauth Not getting access token

问题描述

我在我的 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/signin You 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=9536286a59228e7784a1 and 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

推荐答案

似乎您无法通过 JavaScript 调用该端点

It seems like you can't make a call to that end point via JavaScript

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

在您的示例中，我看到 OPTIONS 方法调用失败，这是因为当您向请求添加额外的标头时，axios 会这样做，但 POST 调用也会失败.

On your example I see that OPTIONS method call fails, and this is because axios does that when you add extra headers to request, but POST call fails as well.

您可以在您的应用程序和服务器上的 github 之间设置一个代理，它只是转发您的请求并回复响应.

You can setup a proxy in between your app and github on your server which simply forwards your requests and replies with response.

这篇关于Github oauth 的 Axios CORS 问题未获取访问令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！