import React, { Component } from 'react' export default class Games extends Component { state ={ loading: true, } async componentDidMount(){ const url="https://api.steampowered.com/ISteamApps/GetAppList/v0001/"; const response = await fetch(url); const data= await response.json(); this.setState({game: data.applist[0],loading:false}); } render() { return ( <div> {this.state.loading||!this.state.game?(<div>loading...</div> ):( <div> <div>{this.state.game.appid}</div> <div>{this.state.game.name}</div> </div>)} </div> ); } }El acceso para buscar en 'https://api.steampowered.com/ISteamApps/GetAppList/v0001/' desde el origen 'http://localhost:3000' ha sido bloqueado por la política CORS: No 'Access-Control-Allow-Origin' el encabezado está presente en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado. Games.js:14 OBTENGA https://api.steampowered.com/ISteamApps/GetAppList/v0001/net::ERR_FAILED
Este no es un error específico de reacción. Déjame explicarte lo que está pasando aquí.
Explicación simplificada de CORS: (más aquí )
CORS es el mecanismo que permite que el servidor envíe una respuesta para una API (en su caso, url=https://api.steampowered.com/ISteamApps/GetAppList/v0001/ ) solo cuando la solicitud proviene de un dominio específico/ origen.
Por ejemplo, al usar CORS , podemos permitir que el servidor responda solo a las solicitudes de API realizadas desde el origen de www.steampowered.com . (y no localhost y otros orígenes)
Ahora llegando a:
Si una respuesta opaca satisface sus necesidades, establezca el modo de solicitud en 'sin cors' para obtener el recurso con CORS deshabilitado
Esto significa que aún puede obtener la respuesta pero de tipo opaque . Ejecute esto y vea la respuesta:
async function apiCall() { const url = 'https://api.steampowered.com/ISteamApps/GetAppList/v0001/' const response = await fetch(url, { mode: 'no-cors', }) console.log(response) } try { apiCall() } catch (e) { console.log('Err is', e.message) }De desarrolladores.google.com :
Una respuesta opaca es para una solicitud realizada para un recurso en un origen diferente que no devuelve encabezados CORS. Con una respuesta opaca, no podremos leer los datos devueltos ni ver el estado de la solicitud, lo que significa que no podemos verificar si la solicitud fue exitosa o no.
Puede usar proxies para evitar esto. Aunque si eres el propietario de la citada url, puedes configurarla para que te otorgue los accesos necesarios.