Si estas desarrollando aplicaciones web Frontend y has encontrado un error como este:
Significa que tienes un error de CORS, el cual es algo de hecho es bastante tipico cuando se esta creando aplicaciones cliente en general, es decir aplicaciones web.
Ahora para solucionarlo, primero necesitas entender que es CORS.
¿Qué es CORS?
"CORS" viene de Cross-Origin Resource Sharing, lo que en español se traduce como Compartir Recursos de Origen Cruzado, y CORS es una política de seguridad que tiene implementada los navegadores web modernos y que se encargar de restringir las solicitudes HTTP de una dominio hacia otro dominio diferente.
Es decir supongamos que tienes una aplicacion web frontend desplegada en mipagina.com y tienes una aplicacion backend desplegada en mibackend.com. El ser dos dominios diferentes obtendras el error CORS.
O incluso este error tambien lo puedes recibir si tienes subdominios, es decir supongamos que tu frontend esta en mipagina.com, pero tu backend esta desplegado en api.mipagina.com, igual obtendras un error de CORS.
Ahora explicadolo asi con dominios, podria parecer que solo es un problema que podrias ver en producción, ya que en producción es cuando usamos los dominios de nuestras aplicaciones, pero no realmente ya que tambien puedes obtener este error cuando estes desarrollando, por ejmplo actualmente es muy comun que cuando se desarrolle una aplicacion frontend muchos frameworks vienen con su propio servidor de desarrollo, por ejemplo cuando creas un proyecto frontend con Vitejs, la herramienta para generar proyectos de React, Vue, Solid, Svelte, etc, este usa el puerto 5173 y si creas una backend como una REST API y esta funciona en el puerto 3000 o 8080 o 8000, y asi, tambien son considerados dos dominios distintos, y obtendras el mismo error CORS.
En otras palabras este error tipicamente se obtiene cuando solicitas algo a otro dominio o por ejemplo:
- Cuando intentas cargar una imagen en el frontend que viene desde el backend, y no carga en el navegador
- cuando intentas hacer una peticion HTTP (GET, POST, PUT, DELETE) desde tu frontend, y no devuelve nada
Y esto paso porque los navegadores implementan una politica de seguridad llamada SAME-ORIGIN, la cual permite a cualquier aplicacion web pueda solicitar datos como imagenes o hacer peticiones HTTP si son del mismo dominio pero si cambian, obtendran automaticamente un error.
Esto funciona, asi cuando el navegador envia peticiones, siempre añade una cabecera llamada Origin y como valor tiene el dominio del cual esta siendo solicitado, cuando el servidor recibe esto, revisa esa cabecera y el servidor tiene el mismo dominio entonces respondera lo que debe, sin ningun problema.
Pero si la peticion que hace el navegador va a una URL diferente, entonces estamos hablando de una Peticion de origen cruzado o Cross-origin request. Es decir Cuando una aplicación web o móvil intenta acceder a un recurso de origen cruzado, el servidor que sirve ese recurso puede enviar la cabecera "Access-Control-Allow-Origin" en la respuesta HTTP para indicar qué dominios están permitidos para acceder a ese recurso. Si el valor de la cabecera es un dominio específico, entonces solo ese dominio puede acceder al recurso.
Si el valor de la cabecera es "*", entonces cualquier dominio puede acceder al recurso.
Pero sino coinciden el navegador inpedira que la respuesta del servidor este accesible a la aplicaicon cliente.
CORS se utiliza para proteger a los usuarios de posibles vulnerabilidades en sitios web maliciosos que podrían intentar robar información o realizar acciones malintencionadas utilizando solicitudes HTTP.
Asi que para permitir las solicitudes de origen cruzado, un servidor web debe especificar explícitamente en las cabeceras de las respuestas HTTP que permite el acceso desde otros orígenes. Los navegadores web utilizan estas cabeceras para determinar si deben permitir la respuesta de la solicitud HTTP.
Ok entonces ya entiendes que es CORS, ¿pero como solucionarlo?
¿Como solucionar CORS?
Bueno si tienes el control del backend, es decir puedes acceder al codigo, solicionarlos es tan facil como decirle al backend que en cada peticion añada la cabecera Access-Control-Allow-Origin, sin embargo como es nombre largo de escribir, tambien hay paquetes o configuraciones que muchos frameworks ya soportan.
Por ejemplo en Nodejs y Express, usando el paquete cors, de esta forma se permite a un frontend que esta en el puerto 5173, conectarse:
app.use(cors({
origin: 'http://localhost:5173'
}));
O este otro ejemplo es en Django, el framework de Python
CORS_ALLOWED_ORIGINS = [
"http://localhost:5173"
]
Este otro es en Spring, el framework mas popular de Java
@RestController
@CrossOrigin(origins = "http://localhost:5173")
public class MyController {
// ...
}
Este otro es en laravel, el framework de PHP
class Cors
{
public function handle($request, Closure $next)
{
$response = $next($request);
$response->header('Access-Control-Allow-Origin', 'http://localhost:5173');
$response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
$response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization, X-Request-With');
return $response;
}
}
Como puedes ver la idea es la misma en todos, simplemente añadir el dominio, Y por supuesto en lugar de http://localhot:5173 como he colocado en estos ejemplos, puede ser el dominio de tu frontend, ya sea un subdominio, o un localhot, incluso puedes colocar varios al mismo tiempo
PreFlight
Ahora a modo de información, ciertos metodos HTTP como PUT, DELETE, PATCH o cabeceras HTTP que no son estandares, es decir las que puedes añadir tu mismo, necesitan enviar una peticion al backend antes que la peticion HTTP Real, algo que recibe el nombre de Preflight o Antes del vuelo, esto es para asegurarse que las peticiones son seguras de hacerse.
funciona asi, cuando un navegador hace una peticion DELETE por ejemplo, este ya sabe que tiene que hacer un Preflight y hace una peticion usando el metodo llamado OPTIONS, luego el servidor respondera con estas cabeceras por ejemplo:
- Allow-Access-Control-Origin: mifrontend.com
- Access-Control-Allow-Methods: DELETE
lo que quiere decir que el cliente con ese dominio tiene autorizacion para hacer peticiones con ese metodo.
Y esto puede sonar ineficiente porque se esta haciendo dos peticiones,un preflight y luego la peticion real, pero para evitar esto, el servidor añade una cabecera extra llamada Access-Control-Max-Age: 86400 con un numero que indica cuanto tiempo debe guardarse en memoria cache la peticion.
Practica
Asi que si tienes un error justo ahora, solo abre la pestaña Network de tu navegador, busca la cabera Access COntrol Allow Origin.
- sino existe, debes añadir cors en tu servidor
- si existen entonces las URL puede que no coincidan, asi que puees ir al backend y añadir la URL de tu frontend o simplemente añadir un *
- o si fue un Preflight, puede que el servidor no permita esos metodos o Headers que estas enviando desde la peticion frontend.
Pero si lo notas todo lo que tienes que hacer es configurarlo desde el servidor.