Oauth重定向返回沒有'Access-Control-Allow-Origin'標題出現在請求的資源上

Question

我目前在我的React和Play應用中實現了OAuth與LinkedIn的登錄，並且在嘗試重定向到運行時出現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.

我有以下設置：

• 遊戲服務器在本地主機上運行：9000
• 作出反應的應用程序（創建通過創建反應的-APP）在本地主機上運行：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.get('/auth/linkedin')

這與重定向到LinkedIn AUTH頁面，然後給我的錯誤一個303響應。

如何在此dev設置中正確使用CORS策略？我試着添加以下到我的package.json作爲創建反應的應用程序內的文檔推薦：

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

而且我也嘗試設置請求頭"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響應標頭，也不是您自己的後端服務器。

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