An OAuth LinkedIn redirected login that returns the "Access-Control-Allow-Origin" header on the requested resource is missing

Question

I am currently using the OAuth login with LinkedIn in my React and Play application and throwing a CORS error when trying to redirect to the authorization page in my dev environment:

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.

I have the following setup:

• Playback server running on localhost: 9000
• Responsive application (created through create-response-app) running on localhost: 3000

My JS code calls the endpoint /auth/linkedin, which is implemented as follows:

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

I have a Play application installed to properly handle CORS.

My response application simply sends a request to the above endpoint via Axios:

axios.get('/auth/linkedin')

303 LinkedIn, .

CORS dev? package.json, create-react-app :

"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 , -.

---

2019-05-30

, , LinkedIn . , LinkedIn .

LinkedIn . , , https://developer.linkedin.com/docs/getting-started-js-sdk, :

JavaScript SDK

https://engineering.linkedin.com/blog/2018/12/developer-program-updates :

JavaScript . OAuth 2.0 .

, ( 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 basic profile data
    function getProfileData() {
        IN.API.Raw("/people/~").result(onSuccess).error(onError);
    }

</script>