LinkedIn OAuth重定向登录返回“否'Access'Control-Allow-Origin'标头出现在请求的资源上”错误
我目前正在我的React and Play应用程序中使用LinkedIn实现OAuth登录，并且在尝试重定向到我的开发环境中的授权页面时遇到了CORS错误：
XMLHttpRequest cannot load https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin. Redirect from 'https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin' to 'https://www.linkedin.com/uas/login?session_redirect=%2Foauth%2Fv2%2Flogin-s…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
我有以下设置：
- 在localhost：9000上运行的播放服务器
- 在localhost：3000运行的React app（通过create-react-app创建）
我的JS代码调用/auth/linkedin端点，实现如下：
Action { implicit req: RequestHeader =>
val csrfToken = CSRF.getToken.get.value
Redirect(linkedinUrl(oauthConfig.linkedinClientId, csrfToken)).withSession("state" -> csrfToken)
}
我将Play应用程序设置为适当地处理CORS。
我的反应应用程序只是通过Axios向上述端点发出请求：
axios.get('/auth/linkedin')
这回复303并重定向到LinkedIn auth页面然后给我错误。
如何在此开发设置中正确使用CORS策略？我已经尝试将以下内容添加到我的package.json中，因为create-react-app文档建议：
"proxy": "http://localhost:9000",
我还尝试"Access-Control-Allow-Origin" : "*"在Play服务器的重定向上设置请求标头但没有成功。
请注意，转到localhost：9000 / auth / linkedin可以正确重定向。
回答 1
Stack Overflow用户
发布于 2019-06-04 16:20:04
https://www.linkedin.com/oauth/v2/authorization响应显然不包含Access-Control-Allow-Origin响应标头，因为它们没有，您的浏览器阻止您的前端JavaScript代码访问响应。
您无法对自己的前端JavaScript代码或后端配置设置进行任何更改，这些设置将允许您的前端JavaScript代码以您直接尝试https://www.linkedin.com/oauth/v2/authorization并成功获得响应的方式发出请求。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS更详细地解释了它的要点，但对于CORS来说，发送请求的服务器必须配置为发送Access-Control-Allow-Origin响应标头，也不是你自己的后端服务器。
2019-05-30更新
当前的状态似乎是，当需要进行LinkedIn授权时，您必须从后端代码发起请求。你无法从你的前端代码中做到这一点，因为LinkedIn根本不再提供任何支持。
LinkedIn之前确实提供了一些从前端代码处理它的支持。但是它所记录的页面，https：//developer.linkedin.com/docs/getting-started-js-sdk，现在有这个通知：
目前不支持JavaScript SDK
而https://engineering.linkedin.com/blog/2018/12/developer-program-updates有这样的：
我们的JavaScript和移动软件开发工具包（SDK）将停止工作。开发人员需要直接从他们的应用迁移到使用OAuth 2.0。
所以这个答案的其余部分（从2017年6月13日开始，差不多两年前，在本次更新时）现在已经过时了。但为了保持历史的完整，它保存在下面。
2017-06-13详细信息，现已废弃
无论如何https://developer.linkedin.com/docs/getting-started-js-sdk有官方文档解释如何请求用户跨域的授权，这似乎是这样的：
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: [API_KEY]
onLoad: [ONLOAD]
authorize: [AUTHORIZE]
lang: [LANG_LOCALE]
IN.User.authorize(callbackFunction, callbackScope);
</script>
并且https://developer.linkedin.com/docs/signin-with-linkedin还有其他auth流的文档：
<script type="in/Login"></script> <!-- Create the "Sign In with LinkedIn" button-->
<!-- Handle async authentication & retrieve basic member data -->
<script type="text/javascript">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
</script>
https://stackoverflow.com/questions/-100006920
复制相似问题