Javascript Github oauth 的 Axios CORS 问题未获取访问令牌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36907693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Axios CORS issue with Github oauth Not getting access token
提问by STEEL
I have created 2 routes on my React-Redux app. I have added github applications settings with homepage and callback URL already.
我在我的 React-Redux 应用程序上创建了 2 个路由。我已经添加了带有主页和回调 URL 的 github 应用程序设置。
1. When you hit this route : https://reduxapp.herokuapp.com/signinYou click on Github login button, ==> githubGeturi
1.当你点击这条路线：https: //reduxapp.herokuapp.com/signin你点击Github登录按钮，==> githubGeturi
2. Github redirects back with a code https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1and githubSendCode('9536286a59228e7784a1') action is triggered
2. Github 重定向回代码https://reduxapp.herokuapp.com/auth/callback?code=9536286a59228e7784a1和githubSendCode('9536286a59228e7784a1') 动作被触发
You can see in network call OPTIONS call goes through, but POST call never happens. and you get a console error:
您可以在网络调用中看到 OPTIONS 调用通过，但 POST 调用从未发生。你会收到一个控制台错误：
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
======== 我发现的唯一可能的方法是使用服务器进行 POST 调用。您可以在此处查看整个解决方案：https: //github.com/steelx/ReduxWeatherApp/commit/6215634ca543a4760ea96397fe31b61f22184d91
采纳答案by Burimi
It seems like you can't make a call to that end point via JavaScript
似乎您无法通过 JavaScript 调用该端点
https://github.com/isaacs/github/issues/330
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.
在您的示例中，我看到 OPTIONS 方法调用失败，这是因为当您向请求添加额外的标头时，axios 会这样做，但 POST 调用也会失败。
You can setup a proxy in between your app and github on your server which simply forwards your requests and replies with response.
您可以在您的应用程序和服务器上的 github 之间设置一个代理，它只是转发您的请求并回复响应。
