2

I am trying to hit a Linkedin accessToken API but always facing CORS error in react js (frontend). Samething works while direct hit in URL bar or through postman. This is the error I am getting:

Access to fetch at 'https://www.linkedin.com/oauth/v2/accessToken' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My Code is:

const queryParams = querystring.stringify({
  redirect_uri: process.env.REACT_APP_LINKEDIN_REDIRECT_URI,
  client_id: process.env.REACT_APP_LINKEDIN_CLIENT_ID,
  client_secret: process.env.REACT_APP_LINKEDIN_CLIENT_SECRET,
  grant_type: 'authorization_code',
  code: code,
});
const headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
};


const response = await fetch(`https://www.linkedin.com/oauth/v2/accessToken`, {
  method: 'POST',
  headers: headers,
  body: queryParams,
});

`

Ankit Shah
  • 1,087
  • 2
  • 15
  • 30
  • Have you tried to add `mode: 'no-cors'` to the options in `fetch`? (see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch ) – Me.Name Sep 20 '21 at 12:31
  • @Me.Name Yes I did, still same – Ankit Shah Sep 20 '21 at 12:33
  • @Me.Name Yes I did, It won't show cors error but also at the same time, it does not show anything in response. i.e. there is no response – Ankit Shah Sep 20 '21 at 12:41
  • Does this answer your question? [How does Access-Control-Allow-Origin header work?](https://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – zero298 Sep 20 '21 at 13:54

4 Answers4

3

The accepted answer (adambene) is misleading, as is the official documentation. The next answer (edarv) is technically correct but too brief to really learn from.

Referencing https://learn.microsoft.com/en-us/linkedin/shared/authentication/authorization-code-flow , There is already a mandatory step in the 3-leg auth flow where, as noted, you do need to simply provide a user-facing link or redirect the browser window, at which point the flow is resumed by Linkedin redirecting back to your website with additional data. But the /accessToken endpoint referenced by the OP is after this step of the flow.

While one Microsoft support thread (https://techcommunity.microsoft.com/t5/sharepoint-developer/cors-error-occuring-after-accessing-linkedin-share-api-through/m-p/787679) also indirectly suggests that you need to add your domain to your app's Widgets list in the App Settings portal, this is also spurious to the OP's use case.

The ultimate answer does appear to be, completely unmentioned in the main auth flow doc, that you simply cannot use any Linkedin API past the initial oauth/v2/authorization redirect from a web client context. Full stop. You'll always get CORS'd. This makes sense if you dig into the side documentation on how/why to protect your client secret specifically for the /accessToken call (https://learn.microsoft.com/en-us/linkedin/shared/api-guide/best-practices/secure-applications?context=linkedin/context), but imo makes less sense for subsequent calls once you have the access token. But whether it makes sense or not, you'll need to set up a webserver or other standalone app to make subsequent API calls.

NNSkelly
  • 51
  • 2
2

The API responses do not include Access-Control-Allow-Origin header so your browser is prohibiting requests to those APIs.

You have 2 choices here:

  1. obtain the access token on the backend using a 2-legged OAuth flow
  2. or use a 3-legged OAuth flow which requires you to redirect the user's browser to Linkedin's site

From a security perspective, you should not distribute the client secret in HTML/JS files.

adambene
  • 1,143
  • 9
  • 16
1

The Linkedin API doesn't allow requests from locations such as localhost using the CORS header 'Access-Control-Allow-Origin'. https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

If you really need it, you could always have your proxy server or use something like https://cors-anywhere.herokuapp.com/.

edarv
  • 361
  • 1
  • 5
0

Implement OAuth integration within your backend service to safeguard the client secret of web client users. Develop an API in your backend to fetch the LinkedIn access token and other necessary information using axios/fetch. Then, return the user information through your API response. Thank you.

Sumeet Choudhary
  • 1