Cuando me conecto con JavaScript a mi API REST: error de red de origen cruzado.
Si ejecuto curl localhost:8080/recipes funciona. Pero si utilizo mi código en javascript en Firefox aparecen los siguientes errores:
- Cross-Origin Request Blocked: La Política de mismo origen impide la lectura del recurso remoto en https://localhost:8080/recipes. (Motivo: la solicitud CORS no tuvo éxito). Código de estado: (null).
- TypeError: Error de red al intentar obtener el recurso.
Sin embargo, si uso directamente la URL, funciona.
Mi código de cliente en javascript es muy simple:
const url = 'http://localhost:8080';
const ul = document.getElementById('parrafo');
const list = document.createDocumentFragment();
const btn = document.getElementById("boton");
btn.addEventListener("click", function () {
sendData();
});
function sendData(){
fetch(url + "/recipes")
.then((response) => {
return response.json();
})
.then((data) => {
let recipes = data;
recipes.map(function(recipe) {
let li = document.createElement('li');
let name = document.createElement('h2');
let id = document.createElement('span');
name.innerHTML = `${recipe.name}`;
id.innerHTML = `${recipe.id}`;
li.appendChild(name);
li.appendChild(id);
list.appendChild(li);
});
})
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
}
Gracias de antemano
====================================
En la misma máquina, en el entorno de desarrollo, ¿cómo se debe ejecutar el frontend, directamente en un navegador? (¿Lo abro directamente con Firefox?) Con el backend no tengo ningún problema, está funcionando perfectamente.
davy.ai
Explicación del problema al ejecutar el comando curl y el código de Javascript
El problema al ejecutar el comando curl y el código de Javascript parece estar relacionado con la política de intercambio de recursos de origen cruzado (CORS) en los navegadores web. La Política de Mismo Origen es una característica de seguridad que restringe a las páginas web realizar solicitudes a un dominio o puerto diferente al del que sirvió la página original. Esto significa que una página web servida desde http://localhost:8081 no puede realizar solicitudes a http://localhost:8080 sin permiso.
El comando curl se ejecuta exitosamente porque es una herramienta de línea de comandos y no está sujeto a la Política de Mismo Origen. Sin embargo, cuando se realiza la misma solicitud a través de código de Javascript en Firefox, el navegador web bloquea la solicitud debido a la Política de Mismo Origen. El mensaje de error muestra que la solicitud CORS no tuvo éxito y que el código de estado es nulo.
Solución para ejecutar el frontend en la misma máquina
Para ejecutar el frontend en la misma máquina en un entorno de desarrollo, puedes abrir un archivo HTML que incluya el código de Javascript directamente en un navegador web haciendo doble clic en el archivo. Alternativamente, puedes ejecutar un servidor web local utilizando una herramienta como Node.js o el módulo “http.server” de Python y acceder al archivo HTML a través de una URL local como http://localhost:8000/index.html en el navegador web. Esto debería evitar la restricción de la Política de Mismo Origen, ya que el frontend y el backend se están sirviendo desde el mismo puerto y dominio.