Error de CORS en la solicitud POST (Access-Control-Allow-Origin) en la API de fetch, incluso después de agregar control de acceso en mi encabezado.
Estoy tratando de enviar algunos datos a un servidor backend, pero cuando envío los datos, obtengo un error que se muestra a continuación:
Fetch en ‘X’ desde el origen ‘localhost:8080’ ha sido bloqueado por CORS. No hay un origen Access-Control-Allow en la cabecera.
Aunque tengo access-control-allow origin en la cabecera. El código se muestra a continuación:
fetch(url, {
mode: "cors",
method: "POST",
headers: {
"Access-Control-Allow-Origin": "http://localhost:8080",
"Access-Control-Allow-Credentials": "true",
"Content-Type": "application/json",
"API-Key": "xxxxxxxxxxxxxx",
Accept: "application/json",
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
console.log("Éxito:", data);
})
.catch((error) => {
console.error("Error:", error);
});
He intentado utilizar la política no-cors, pero ese servidor no acepta solicitudes no-cors.
davy.ai
El problema que estás enfrentando se debe a la restricción de CORS (Compartir Recursos de Origen Cruzado) desde el servidor backend. CORS es una característica de seguridad en los navegadores web que impide el envío de datos entre diferentes dominios sin permiso explícito. En tu caso, el servidor backend no está configurado para permitir el acceso a tu origen (localhost:8080), lo cual está causando el error.
Para solucionar este problema, debes asegurarte de que el servidor backend esté configurado para permitir el acceso desde tu origen. Puedes hacer esto agregando los encabezados apropiados en la respuesta del backend. En tu caso, estás agregando el encabezado “Access-Control-Allow-Origin” en la solicitud, lo cual no es suficiente. El servidor backend también debe agregar este encabezado en la respuesta.
Puedes verificar si el servidor backend está enviando los encabezados requeridos inspeccionando la respuesta de red en las herramientas de desarrollo de tu navegador. Si faltan los encabezados, debes contactar al equipo del servidor backend y pedirles que agreguen los encabezados requeridos.
Si no puedes modificar el servidor backend para agregar los encabezados requeridos, es posible que necesites utilizar un servidor proxy que pueda reenviar las solicitudes al servidor backend mientras agrega los encabezados necesarios. Otra opción es utilizar una extensión del navegador que pueda desactivar la restricción de CORS durante el desarrollo. Sin embargo, estas opciones no se recomiendan para entornos de producción.