javascript – Oauth重定向返回没有’Access-Control-Allow-Origin’标头出现在请求的资源上

我目前正在我的React and Play应用程序中使用LinkedIn实现OAuth登录,并且在尝试重定向到我的开发环境中的授权页面时遇到了CORS错误:

XMLHttpRequest无法加载https://www.linkedin.com/oauth/v2/authorization?response_type=code\u0026amp;client_i…basicprofile\u0026amp;redirect_uri=http://localhost:9000/users/linkedin.从’https://www.linkedin.com/oauth/v2/authorization?response_type=code\u0026amp;client_i…basicprofile\u0026amp;redirect_uri=http://localhost:9000/users/linkedin’重定向到’https://www.linkedin CORS策略已阻止.com / uas / login?session_redirect = / oauth / v2 / login-s …’:请求的资源上没有“Access-Control-Allow-Origin”标头.因此不允许原点’null’访问.

我有以下设置:

>播放在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可以正确重定向.

最佳答案
https://www.linkedin.com/oauth/v2/authorization响应显然不包含Access-Control-Allow-Origin响应标头,因为它们没有,您的浏览器阻止您的前端JavaScript代码访问响应.

您可以对自己的前端JavaScript代码或后端配置设置进行任何更改,这些设置将允许您的前端JavaScript代码以您直接尝试https://www.linkedin.com/oauth/v2/的方式发出请求授权并成功获得回复.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS更详细地解释了它的要点,但对于CORS来说,发送请求的服务器必须配置为发送Access-Control-Allow-Origin响应头,也不是你自己的后端服务器.

无论如何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>

转载注明原文:javascript – Oauth重定向返回没有’Access-Control-Allow-Origin’标头出现在请求的资源上 - 代码日志