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

XMLHttpRequest 无法加载 https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin。从'https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_i…basicprofile&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fusers%2Flinkedin'重定向到'https://www.linkedin.com/uas/login?session_redirect=%2Foauth%2Fv2%2Flogin-s…' 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此不允许访问 Origin 'null'。

我有以下设置:

• 在 localhost:9000 运行的 Play 服务器
• 在 localhost:3000 运行的 React 应用程序(通过 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。

我的 React 应用只是通过 Axios 向上述端点发出请求:

axios.get('/auth/linkedin')

这会以 303 响应并重定向到 LinkedIn 身份验证页面，然后给我错误。

如何让 CORS 策略在此开发设置中正常工作？我尝试按照 create-react-app 文档的建议将以下内容添加到我的 package.json 中:

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

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

请注意，转到 localhost:9000/auth/linkedin 会正确重定向。

最佳答案

https://www.linkedin.com/oauth/v2/authorization 响应显然不包含 Access-Control-Allow-Origin 响应 header ，并且因为它们不这样做，所以您的浏览器会阻止您的前端 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 响应 header ，也不是您自己的后端服务器.

2019-05-30更新

目前的情况似乎是，当需要进行 LinkedIn 授权时，您必须从后端代码发起请求。你无法从前端代码中做到这一点，因为 LinkedIn 根本不再提供任何支持。

LinkedIn 之前确实提供了一些从前端代码处理它的支持。但是记录它的页面，https://developer.linkedin.com/docs/getting-started-js-sdk ，现在有这个:

The JavaScript SDK is not currently supported

和https://engineering.linkedin.com/blog/2018/12/developer-program-updates有这个:

Our JavaScript and Mobile Software Development Kits (SDKs) will stop working. Developers will need to migrate to using OAuth 2.0 directly from their apps.

所以这个答案的其余部分(从 2017-06-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>

关于javascript - LinkedIn OAuth 重定向登录返回 "No ' Access-Control-Allow-Origin' header is present on the requested resource“错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44530615/