Axios CORS issue with Github oauth Not getting access token

Question

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

Answer 1

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.