admin管理员组文章数量:1326511
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,
});
`
Share Improve this question asked Sep 20, 2021 at 12:27 Ankit ShahAnkit Shah 1,3352 gold badges18 silver badges34 bronze badges 4-
Have you tried to add
mode: 'no-cors'
to the options infetch
? (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
4 Answers
Reset to default 4The 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:
- obtain the access token on the backend using a 2-legged OAuth flow
- 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
版权声明:本文标题:javascript - CORS error on Linkedin oauthv2accessToken API from frontend - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742200674a2431899.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论