javascript - CORS error on Linkedin oauthv2accessToken API from frontend - Stack Overflow

admin管理员组

文章数量:1326683

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 '' 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(``, {
  method: 'POST',
  headers: headers,
  body: queryParams,
});

`

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./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./oauth/v2/accessToken`, {
  method: 'POST',
  headers: headers,
  body: queryParams,
});

`

• javascript
• reactjs
• cors
• frontend
• linkedin-api

Share Improve this question Follow asked Sep 20, 2021 at 12:27 Ankit ShahAnkit Shah 1,33522 gold badges1818 silver badges3434 bronze badges 4

• Have you tried to add mode: 'no-cors' to the options in fetch? (see developer.mozilla/en-US/docs/Web/API/Fetch_API/Using_Fetch ) – Me.Name Commented Sep 20, 2021 at 12:31
• @Me.Name Yes I did, still same – Ankit Shah Commented Sep 20, 2021 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 Commented Sep 20, 2021 at 12:41
• Does this answer your question? How does Access-Control-Allow-Origin header work? – zero298 Commented Sep 20, 2021 at 13:54

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./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://techmunity.microsoft./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, pletely 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./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.

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.

The Linkedin API doesn't allow requests from locations such as localhost using the CORS header 'Access-Control-Allow-Origin'. https://en.wikipedia/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./.

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.

本文标签： javascriptCORS error on Linkedin oauthv2accessToken API from frontendStack Overflow