Oauthリダイレクト要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません

Question

現在、React and PlayアプリケーションでLinkedInでOAuthログインを実装していますが、リダイレクトしようとするとCORSエラーが発生します。私のdevの環境での認証ページ：

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
• アプリ（作成に反応します経由して作成反応するアプリ）ローカルホストで実行されている：私は適切CORSを処理するために、私のPlayアプリケーションを設定している

  Action { implicit req: RequestHeader => 
      val csrfToken = CSRF.getToken.get.value 
      Redirect(linkedinUrl(oauthConfig.linkedinClientId, csrfToken)).withSession("state" -> csrfToken) 
  } 
  

  ：3000

私のJSコードは次のように実装されて/auth/linkedinエンドポイントを呼び出します。

反応する私のアプリはちょうどAxiosを経由して上記のエンドポイントへの要求を行う：

axios.get('/auth/linkedin')

そして、これは私にエラーを与えるのLinkedInの認証ページへのリダイレクトと303で応答します。

このDEVセットアップでCORSポリシーが正しく機能するようにするにはどうすればよいですか？

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

そして私はまた、プレイサーバーにリダイレクトに"Access-Control-Allow-Origin" : "*"にリクエストヘッダを設定しようとしました：私は作成-反応するアプリのドキュメントとして私package.jsonに次を追加しようとした推奨しています成功なし。

localhost：9000/auth/linkedinが正しくリダイレ​​クトされることに注意してください。

Answer 1

https://www.linkedin.com/oauth/v2/authorizationレスポンスヘッダーがレスポンスヘッダーに含まれていない可能性があります。レスポンスヘッダーが含まれていないため、ブラウザはフロントエンド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>