Cómo habilitar CORS en Flask paso a paso

Cuando trabajas con Flask y necesitas conectar tu backend con otra app (por ejemplo, un frontend en Vue o React), tarde o temprano te encontrarás con el temido error de CORS, en este punto, ya tenemos nuestra Rest API en Flask creada, ahora la queremos poder conectar desde otras apps.

En mi caso, me pasó al consumir una API Flask desde una app Vue: el navegador bloqueaba las peticiones por seguridad.
La solución pasa por entender qué es CORS, cómo configurarlo correctamente en Flask y, sobre todo, cómo hacerlo de manera segura.

¿Qué es CORS y por qué es necesario en Flask?

CORS (Cross-Origin Resource Sharing) es un mecanismo que permite que un dominio acceda a recursos de otro dominio.
Por defecto, los navegadores bloquean solicitudes entre orígenes distintos por motivos de seguridad.
Esto significa que si tienes tu API Flask corriendo en localhost:5000 y tu frontend Vue en localhost:8080, las peticiones serán bloqueadas… a menos que habilites CORS.

En mi experiencia, esto tiene “todo el sentido del mundo”: en el 99% de los casos no queremos que otros dominios modifiquen nuestros datos.
Pero en este mundo interconectado —con apps móviles, web y microservicios— necesitamos abrir esa puerta de forma controlada y segura.
Ahí entra en juego Flask-CORS.

Los CORS los podemos definir como:

El Intercambio de Recursos de Origen Cruzado (CORS (en-US)) es un mecanismo que  permite configurar un servidor para obtener permisos para acceder a recursos seleccionados de dicho servidor a un origen distinto (dominio).

Y esto es según la definición que tenemos en Mozilla:

https://developer.mozilla.org/es/docs/Web/HTTP/CORS

Como ejemplo tenemos si tenemos una App en Flask, creamos una Rest Api como creamos en el curso completo y queremos consumir la misma desde una app en Vue:

▶

Por defecto, el servidor va a bloquear cualquier solicitud que venga desde otro dominio, lo cual tiene todo el sentido del mundo ya que en el 99.99 por ciento de los casos nos va a interesar que ninguna otra app o dominio puedan hacer operaciones sobre nuestra app.

Aunque en este mundo interconectado, que creamos una app web, pero luego creamos otras apps para mejorar el acceso de la misma según el dispositivo, y por ende creamos apps adicionales, ya sean móviles con Flutter, Vue Native, React, Android Nativo, Vue... necesitamos abrir esa puerta para poder comunicar estas apps con nuestra nube personal, y en estos casos podemos emplear los CORS para abrir esta puerta de manera controlada y segura; 

Al ser Flask un micro framework, tenemos que instalar una dependencia o paquete para poder emplear esta característica, en esta entrada seleccionamos el siguiente:

https://flask-cors.readthedocs.io/en/latest/

Recuerda tener tu app creada, un hola mundo en Flask, y tu rest api en Flask.

⚙️ Instalar Flask-CORS en tu proyecto Python

Flask es un microframework minimalista, así que para usar CORS debemos instalar un paquete externo:

Que una vez instalada:

 pip install flask-cors

Configurar CORS en Flask de forma controlada y segura

Primero, importa el módulo y configúralo sobre tu aplicación Flask:

Realizamos las configuraciones típicas

#CORS
from flask_cors import CORS
cors = CORS(app, resources={r"/api/*": {"origins": "http://localhost:8080"}})

Qué hace este código:

1. /api/* hace referencia a que parte del dominio vas a permitir compartir; generalmente no necesitas habilitar el acceso a toda la app, si no solo a tu rest api, que generalmente comienza con el sufijo de "api" que es la que habilitamos.
2. No uses "*" salvo para pruebas locales.
3. En el origen, podemos colocarlos todos con *, o uno en particular; en esta caso, colocamos el localhost y el puerto 8080 que es la app de Vue en modo desarrollo
   ya con esto, desde nuestra app en Vue, podemos consumir nuestra rest:

   fetch("http://localhost:5000/api/products/")
      .then((res) => res.json())
      .then((res) => (this.products = res));

Y ver la respuesta desde el navegador:

Sin el uso de los CORS en Flask:

Antes de habilitar CORS, el navegador mostraba un error:

“Access to fetch at 'http://localhost:5000/api/products/' from origin 'http://localhost:8080' has been blocked by CORS policy.”

CORS en desarrollo vs producción

Durante el desarrollo es común usar origins='*' para simplificar pruebas, pero nunca lo hagas en producción.
En entornos reales, debes especificar los dominios exactos:

CORS(app, resources={r"/api/*": {"origins": ["https://miapp.com", "https://admin.miapp.com"]}})

Así te aseguras de que solo tus aplicaciones oficiales puedan comunicarse con la API.

Errores comunes y cómo solucionarlos

Error    Causa    Solución
Blocked by CORS policy    No configuraste Flask-CORS o el origen no coincide.    Verifica el valor exacto del origin.
No 'Access-Control-Allow-Origin' header    La cabecera no se envió correctamente.    Revisa tu configuración CORS(app, ...).
Error con método OPTIONS    El navegador hace una “preflight request”.    Habilita métodos OPTIONS en tu API o deja que Flask-CORS lo maneje automáticamente.

Consejos rápidos de depuración

Revisa la consola del navegador: ahí verás qué dominio y cabecera está bloqueando la solicitud.

Usa curl para probar fuera del navegador:

curl -i -X GET http://localhost:5000/api/products/

Activa el modo verbose en tu frontend para ver cabeceras CORS enviadas.

⚡ Alternativas y configuraciones avanzadas

Flask-CORS también permite usar un decorador por ruta, ideal si solo quieres habilitar CORS en ciertos endpoints:

from flask_cors import cross_origin
@app.route("/api/products")
@cross_origin(origins="http://localhost:8080")
def products():
   return jsonify({"message": "ok"})

Esto te da más control cuando tienes rutas públicas y privadas en la misma aplicación.

También puedes definir configuraciones mediante variables de entorno, lo cual es recomendable en proyectos grandes.

Conclusión y buenas prácticas finales

• Usa CORS solo donde sea necesario.
• Limita los orígenes. No uses * en producción.
• Centraliza la configuración.
• Prueba siempre con tu frontend real antes de publicar.
• En mi caso, habilitar CORS correctamente fue clave para conectar Flask con Vue y continuar desarrollando sin bloqueos del navegador, pero, puedes conectarlo con cualquier otra tecnología como React, Angular, Flutter…

❓ Preguntas frecuentes sobre Flask CORS (FAQs)

1. ¿Qué es Flask-CORS y cómo funciona?
Es una extensión de Flask que añade automáticamente las cabeceras necesarias (Access-Control-Allow-Origin, etc.) para permitir peticiones entre dominios.

2. ¿Cómo probar si mi API Flask tiene CORS activo?
Puedes hacer una petición fetch desde otro dominio o usar curl -I para ver si aparece el encabezado Access-Control-Allow-Origin.

3. ¿Puedo usar Flask-CORS solo en endpoints específicos?
Sí, con el decorador @cross_origin() aplicado a las rutas deseadas.

4. ¿Cómo solucionar el error de CORS al usar fetch?
Asegúrate de que el origen del frontend esté autorizado en Flask-CORS y que la API responda correctamente a las solicitudes OPTIONS.

Siguiente paso, Aprende a hacer el Implementar tus primeras pruebas unitarias y de integración en Flask.