Estoy tratando de acceder a una API accessToken de Linkedin, pero siempre me encuentro con un error CORS en react js (frontend). Lo mismo funciona mientras se golpea directamente en la barra de URL o a través del cartero. Este es el error que estoy recibiendo:
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.
Mi código es:
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, });`
Las respuestas de la API no incluyen el encabezado Access-Control-Allow-Origin por lo que su navegador prohíbe las solicitudes a esas API.
Tienes 2 opciones aquí:
Desde una perspectiva de seguridad, no debe distribuir el secreto del cliente en archivos HTML/JS .
La API de Linkedin no permite solicitudes de ubicaciones como localhost utilizando el encabezado CORS 'Access-Control-Allow-Origin'. https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Si realmente lo necesita, siempre puede tener su servidor proxy o usar algo como https://cors-anywhere.herokuapp.com/ .