Question

我目前正在我的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

我的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认证页面，然后给我错误。

如何在此开发设置中正确使用CORS策略？我尝试将以下内容添加到我的package.json中，因为create-react-app文档建议：

"proxy": "http://localhost:9000",

我还尝试在Play服务器的重定向上为"Access-Control-Allow-Origin" : "*"设置请求标头但没有成功。

请注意，转到localhost：9000 / auth / linkedin可以正确重定向。

Answer 1

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更新

关于以下答案的其余部分，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还有其他文档可供另一个身份验证：

<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>

Answer 2

我遇到了类似的问题，让我们把这个问题分解成详细的步骤

点击请求以获取代码（来自前端）
现在将此代码发送到后端
在后端，再次调用 LinkedIn OAuth API 并获取访问令牌
使用此访问令牌进行 3 次单独调用以获取姓名、个人资料图片和用户的电子邮件（是的，您听说过，您需要进行 3 个单独的调用，而且响应 JSON 格式不是很吸引人）

Visit this为详细的分步过程，涉及的东西很多。我可以在这里分享过程，但对于实际实施 visit this.

https://www.wellhow.online/2021/04/setting-up-linkedin-oauth-and-fixing.html

Answer 3

可以做的是：

window.location.href='http://localhost:9000/auth/linkedin'

urlEndPoint可以直接链接到linkedIn的API或调用链接In的API的后端服务。

Oauth重定向返回No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上

3 个答案: