小编Mat*_*ler的帖子

我目前正在我的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可以正确重定向.