javascript - Axios CORS issue with Github oauth Not getting access token - Stack Overflow

admin管理员组

文章数量:1225006

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

1. When you hit this route : You click on Github login button, ==> githubGeturi

2. Github redirects back with a code and githubSendCode('9536286a59228e7784a1') action is triggered

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

XMLHttpRequest cannot load ;…_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 '' is therefore not allowed access.

Below is my action functions:

const CLIENT_ID = '32b70bf671e04762b26c';
const CLIENT_SECRET = '123456789123456789123456789';
const ROOT_URL = window.location.origin;
const REDIRECT_URL = `${ROOT_URL}/auth/callback`;
const AUTHORIZE_URL = '';
const ACCESS_TOKEN_URL = '';
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))
      );
  };
}

======== The only possible way I found is make POST call with server. You can view the entire solution here:

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

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

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

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.

Below is my action functions:

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

======== 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
• github
• oauth
• cors
• axios

Share Improve this question Follow edited Apr 10, 2018 at 11:05 Catfish 19.3k6060 gold badges213213 silver badges358358 bronze badges asked Apr 28, 2016 at 7:10 STEELSTEEL 10.1k99 gold badges7474 silver badges9393 bronze badges 3

• Is this not a duplicate of this SO question? stackoverflow.com/questions/14705726/… – Clarkie Commented May 1, 2016 at 17:08
• This is oauth API issue – STEEL Commented May 1, 2016 at 17:11
• 1 Do NOT post your secret on here! – Catfish Commented Apr 10, 2018 at 11:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 10

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

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

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.

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

本文标签： javascriptAxios CORS issue with Github oauth Not getting access tokenStack Overflow