utilizando una API nacional gratuita para obtener datos, “bloqueado por la política de CORS” pero funciona con Postman/o una URL regular
Estoy tratando de obtener una lista de libros de la API de la Biblioteca Nacional (gratis para uso público).
Devuelve JSON al visitar la URL en Chrome o al golpear el endpoint con Postman.
Sin embargo, no puedo deshacerme del error cuando intento hacerlo a través de localhost, mientras desarrollo.
cuando agrego: { mode: "no-cors" }
a las opciones de fetch,
recibo una respuesta de vuelta, pero de tipo opaco, por lo que no puedo leer los datos.
fetch(
`https://api.nli.org.il/openlibrary/search?api_key=uoX9ZMiaRMIBUF4pX0SEuGXMRpUqQIHrw5XuQKcE&query=title,exact,,AND;language,exact,heb&output_format=json&material_type=books`,
{
method: "GET",
headers: {
"Access-Control-Allow-Origin": "*",
},
}
).then((response) => console.log(response));
Error en la consola:
Access to fetch at ‘https://api.nli.org.il/openlibrary/search?api_key=uoX9ZMiaRMIBUF4pX0SEuGXMRpUqQIHrw5XuQKcE&query=title,exact,%D7%97%D7%A0%D7%95%D7%9A,AND;language,exact,heb&output_format=json&material_type=books’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: 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.
davy.ai
Como experto en TI especializado en JavaScript, queda claro que el problema está con la política de CORS (Compartición de recursos de origen cruzado). Al hacer una solicitud desde un origen diferente (como localhost) a un servidor, el servidor necesita permitir la solicitud agregando el encabezado “Access-Control-Allow-Origin” a la respuesta. En este caso, la API de la Biblioteca Nacional no permite solicitudes desde localhost.
Agregar la opción
{ mode: "no-cors" }a las opciones defetchdeshabilita CORS, pero también significa que la respuesta será de tipo “opaco”, lo que significa que no puede ser accedida por JavaScript.Para resolver el problema, no podemos cambiar la política de CORS de la API de la Biblioteca Nacional. Sin embargo, hay soluciones alternativas para esto. Una forma es crear un proxy en nuestro servidor que reenvíe la solicitud a la API de la Biblioteca Nacional y agregue los encabezados necesarios a la respuesta. De esta manera, podemos hacer una solicitud a nuestro servidor y nuestro servidor la reenviará a la API de la Biblioteca Nacional y enviará de vuelta la respuesta con los encabezados apropiados.
Otra forma es utilizar JSONP, que significa JSON con Relleno. Es una técnica para obtener datos de un dominio diferente, que implica inyectar una etiqueta de script en el DOM con la URL del punto final de la API y un parámetro de devolución de llamada. Luego, la API envuelve la respuesta JSON en la función de devolución de llamada especificada, que es ejecutada por la etiqueta de script. De esta manera, podemos eludir la política de CORS ya que el navegador lo trata como una solicitud para cargar un script desde un dominio diferente, lo cual está permitido.
En general, como experto en TI en JavaScript, entender la política de CORS es esencial al realizar solicitudes desde diferentes dominios. Hay formas de sortearlo, como crear un proxy en nuestro servidor o utilizar JSONP, pero debemos tener en cuenta los riesgos de seguridad y elegir la solución adecuada según nuestros requisitos.