Estoy usando la API de Peloton para generar estadísticas basadas en los datos de entrenamiento obtenidos de su API. Ciertas solicitudes de API requieren que el usuario inicie sesión, lo que se puede hacer enviando su nombre de usuario y contraseña a /auth/login. Devuelve una ID de sesión que se necesita para obtener esas solicitudes bloqueadas, como el historial de entrenamiento. El ID de sesión aparentemente se envía como una cookie (usando credenciales: 'incluir').
Cuando configuro las credenciales para incluir, dice "Access to fetch at (url) from origin (my site) has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '\*' when the request's credentials mode is 'include'. ¿Cómo soluciono esto? Mi código está a continuación.
async function loginAndGetData(username, password) { const info = { 'username_or_email': username, 'password': password }; const response = await fetch("https://pelotoncors.herokuapp.com/https://api.onepeloton.com/auth/login", { method: 'POST', body: JSON.stringify(info) }); const loginInfo = await response.json(); const workoutInfo = await fetch('https://pelotoncors.herokuapp.com/https://api.onepeloton.com/api/user/' + loginInfo.user_id + '/workouts?limit=1234567890', { method: 'GET', credentials: 'include' }); }Así que identifiqué múltiples problemas:
Lógicamente, para evitar el uso de la API por parte de cualquier persona, Paleton, como cualquier otra persona que crea una API seria, decidió colocar encabezados CORS en sus respuestas, lo que obviamente no solo es razonable desde el punto de vista de la seguridad, sino que puede ser bastante molesto porque hace que sea básicamente imposible usar la API desde los navegadores porque el navegador impone los encabezados CORS que los servidores configuran en las respuestas.
Entonces, su primera idea con cors-anywhere parece racional, pero no funciona porque usa credentials: 'include' que requiere que el encabezado 'Access-Control-Allow-Origin' NO esté configurado como comodín * .
Si no está familiarizado con lo que significa todo lo anterior, permítame explicarlo: en su código anterior, que asumo debido al mensaje de error anterior que ejecuta en un navegador, intenta realizar una llamada de búsqueda a cors-anywhere con la URL de la API y el ID de usuario. Cors-anywhere hace la llamada a la API por usted e ignora los CORS-Headers (puede hacerlo porque es solo una política creada para que los navegadores aumenten la seguridad), le envía los datos que obtiene de la API PERO con el ' Access-Control-Allow-Origin' (de forma predeterminada) configurado como comodín * . Sin embargo, debido a que usa credentials: 'include' , que requiere que el encabezado 'Access-Control-Allow-Origin' NO esté configurado como comodín, su navegador detecta una violación de la política CORS y obtiene el error anterior.
Entonces, qué puedes hacer ahora ?
Supongo que el problema es su backend en Heroku, debe configurar el encabezado "Access-Control-Allow-Origin": verdadero en su backend.