const runFunction = async () => { try { const getAPI = await fetch(`https://xkcd.com/1/info.0.json`); const resp = await getAPI.json(); console.log(resp); } catch (error) { console.log(error); } } runFunction();Estoy tratando de obtener información de una API usando fetch y async/await pero recibo un error CORS. He intentado agregar varios encabezados como:
const getAPI = await fetch(`https://xkcd.com/1/info.0.json`, { headers: { "Access-Control-Allow-Origin":"*", "Access-Control-Allow-Methods": "HEAD, GET, POST, PUT, PATCH, DELETE", "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token" } });Hacer eso todavía me da el error "No hay encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado". La única forma en que he podido resolver el problema es agregando una extensión de desbloqueo CORS a mi navegador. No creo que sea una forma eficiente de usar mi código porque cualquiera que acceda a mi proyecto tendrá que descargar la extensión.
Para solucionar este problema, ¿tendré que crear una aplicación de nodo? ¿No hay forma de arreglar esto en el lado del cliente?
Los encabezados Access-Control-Allow-* son encabezados de respuesta, por lo que agregarlos a su solicitud no tendrá ningún efecto. El propietario de xkcd.com tendría que habilitar las solicitudes CORS en su servidor agregando estos encabezados.
No hay nada que pueda hacer para obtener el lado del cliente si el propietario del servidor no ha habilitado CORS.