Flask-CORS

Qué es Cross Origin Resource Sharing

Cross Origin Resource Sharing (CORS) es un mecanismo de seguridad implementado por los navegadores web que controla cómo las páginas web pueden acceder a recursos desde dominios diferentes al que las sirve. Este sistema de protección surge de la política del mismo origen (Same-Origin Policy), una medida de seguridad fundamental que impide que scripts ejecutándose en una página web accedan a recursos de otro dominio sin autorización explícita.

Cuando desarrollamos APIs con Flask, es común que nuestro backend se ejecute en un puerto (por ejemplo, localhost:5000) mientras que nuestro frontend se sirve desde otro puerto diferente (localhost:3000). Desde la perspectiva del navegador, estos son orígenes distintos, por lo que las peticiones entre ellos quedan bloqueadas por defecto.

Componentes del origen

Un origen se define por la combinación de tres elementos:

• Protocolo: http:// o https://
• Dominio: localhost, example.com, api.miapp.com
• Puerto: :3000, :5000, :8080

Cualquier diferencia en estos componentes hace que el navegador considere los recursos como de orígenes distintos. Por ejemplo:

http://localhost:3000  ←→  http://localhost:5000  (diferente puerto)
https://miapp.com      ←→  http://miapp.com       (diferente protocolo)
https://api.miapp.com  ←→  https://miapp.com      (diferente subdominio)

Funcionamiento de las peticiones CORS

Cuando una aplicación web intenta realizar una petición a un origen diferente, el navegador implementa un proceso de verificación en dos fases:

Peticiones simples como GET o POST con contenido básico se envían directamente, pero el navegador verifica las cabeceras de respuesta para determinar si debe permitir que el JavaScript acceda a los datos recibidos.

Peticiones complejas que incluyen métodos como PUT, DELETE o cabeceras personalizadas requieren una petición preflight. El navegador envía automáticamente una petición OPTIONS al servidor antes de la petición real:

OPTIONS /api/usuarios HTTP/1.1
Origin: http://localhost:3000
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: Authorization

El servidor debe responder indicando qué orígenes, métodos y cabeceras están permitidos:

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization, Content-Type

Solo si esta verificación es exitosa, el navegador procede a enviar la petición real.

Cabeceras CORS principales

Las cabeceras CORS más importantes que debe incluir nuestro servidor Flask son:

• Access-Control-Allow-Origin: Especifica qué orígenes pueden acceder al recurso. Puede ser un dominio específico (http://localhost:3000) o el comodín * para permitir cualquier origen.

• Access-Control-Allow-Methods: Lista los métodos HTTP permitidos (GET, POST, PUT, DELETE, etc.).

• Access-Control-Allow-Headers: Indica qué cabeceras personalizadas puede incluir la petición del cliente.

• Access-Control-Allow-Credentials: Determina si las peticiones pueden incluir cookies o cabeceras de autenticación.

Escenarios comunes donde CORS es necesario

En el desarrollo con Flask, CORS se vuelve esencial en varios escenarios típicos:

Desarrollo local: Cuando nuestro frontend (React, Vue, Angular) se ejecuta en localhost:3000 y nuestra API Flask en localhost:5000, necesitamos CORS para que ambos puedan comunicarse durante el desarrollo.

Arquitecturas de microservicios: Si tenemos múltiples servicios Flask ejecutándose en diferentes puertos o subdominios, CORS permite la comunicación entre ellos.

APIs públicas: Cuando queremos que desarrolladores externos consuman nuestra API desde sus propias aplicaciones web, CORS es fundamental para habilitar este acceso.

Aplicaciones móviles híbridas: Frameworks como Ionic o Cordova que ejecutan aplicaciones web dentro de un contenedor nativo también requieren configuración CORS adecuada.

Sin una configuración CORS apropiada, los navegadores bloquearán estas peticiones y mostrarán errores como:

Access to fetch at 'http://localhost:5000/api/usuarios' from origin 'http://localhost:3000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.

Este error indica que nuestro servidor Flask no está enviando las cabeceras necesarias para autorizar la petición cross-origin, lo que hace imprescindible implementar una solución CORS en nuestras aplicaciones.

Flask-CORS para APIs

Flask-CORS es una extensión que simplifica enormemente la implementación de CORS en nuestras aplicaciones Flask. En lugar de configurar manualmente todas las cabeceras CORS en cada endpoint, esta librería nos proporciona decoradores y configuraciones globales que automatizan todo el proceso.

Instalación de Flask-CORS

Para comenzar a usar Flask-CORS en nuestro proyecto, debemos instalarlo mediante pip:

pip install Flask-CORS

Una vez instalado, podemos importarlo en nuestra aplicación Flask y comenzar a utilizarlo de inmediato.

Configuración básica global

La forma más sencilla de habilitar CORS en toda nuestra aplicación Flask es aplicando la configuración de manera global:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/usuarios')
def obtener_usuarios():
    usuarios = [
        {'id': 1, 'nombre': 'Ana'},
        {'id': 2, 'nombre': 'Carlos'}
    ]
    return jsonify(usuarios)

if __name__ == '__main__':
    app.run(debug=True)

Con esta configuración básica, todos los endpoints de nuestra aplicación Flask quedarán habilitados para recibir peticiones desde cualquier origen. Flask-CORS añade automáticamente las cabeceras necesarias a todas las respuestas.

Configuración específica por origen

En entornos de producción, permitir acceso desde cualquier origen (*) puede representar un riesgo de seguridad. Flask-CORS nos permite especificar exactamente qué dominios pueden acceder a nuestra API:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

# Configuración CORS específica para desarrollo
CORS(app, origins=['http://localhost:3000', 'http://localhost:8080'])

@app.route('/api/productos')
def obtener_productos():
    productos = [
        {'id': 1, 'nombre': 'Laptop', 'precio': 999.99},
        {'id': 2, 'nombre': 'Mouse', 'precio': 29.99}
    ]
    return jsonify(productos)

Esta configuración restringe el acceso únicamente a las aplicaciones que se ejecuten en localhost:3000 y localhost:8080, bloqueando cualquier otro origen.

Configuración avanzada con parámetros específicos

Flask-CORS ofrece múltiples parámetros para personalizar el comportamiento CORS según nuestras necesidades específicas:

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)

# Configuración CORS avanzada
CORS(app, 
     origins=['http://localhost:3000'],
     methods=['GET', 'POST', 'PUT', 'DELETE'],
     allow_headers=['Content-Type', 'Authorization'],
     supports_credentials=True
)

@app.route('/api/perfil', methods=['GET'])
def obtener_perfil():
    # Endpoint que requiere autenticación
    token = request.headers.get('Authorization')
    if not token:
        return jsonify({'error': 'Token requerido'}), 401
    
    return jsonify({'usuario': 'admin', 'rol': 'administrador'})

Los parámetros más importantes son:

• origins: Lista de dominios permitidos
• methods: Métodos HTTP habilitados para peticiones cross-origin
• allow_headers: Cabeceras que el cliente puede enviar
• supports_credentials: Permite el envío de cookies y cabeceras de autenticación

Aplicación de CORS a endpoints específicos

En ocasiones necesitamos aplicar diferentes configuraciones CORS a distintos endpoints. Flask-CORS nos permite usar el decorador @cross_origin para configuraciones granulares:

from flask import Flask, jsonify
from flask_cors import CORS, cross_origin

app = Flask(__name__)

# CORS global básico
CORS(app)

@app.route('/api/publico')
@cross_origin(origins='*')
def endpoint_publico():
    return jsonify({'mensaje': 'Acceso público'})

@app.route('/api/privado')
@cross_origin(origins=['https://miapp.com'], supports_credentials=True)
def endpoint_privado():
    return jsonify({'datos': 'Información sensible'})

@app.route('/api/admin', methods=['POST', 'PUT'])
@cross_origin(origins=['https://admin.miapp.com'], 
              methods=['POST', 'PUT'],
              allow_headers=['Authorization', 'Content-Type'])
def endpoint_admin():
    return jsonify({'resultado': 'Operación administrativa'})

Esta aproximación nos da control total sobre qué endpoints tienen qué nivel de acceso CORS, permitiendo implementar políticas de seguridad diferenciadas.

Configuración para desarrollo vs producción

Es común necesitar diferentes configuraciones CORS según el entorno. Podemos implementar esta lógica usando variables de entorno:

import os
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

# Configuración dinámica según entorno
if os.getenv('FLASK_ENV') == 'development':
    # Desarrollo: acceso desde localhost
    CORS(app, origins=['http://localhost:3000', 'http://localhost:8080'])
else:
    # Producción: dominios específicos
    CORS(app, origins=['https://miapp.com', 'https://www.miapp.com'])

@app.route('/api/configuracion')
def obtener_configuracion():
    return jsonify({
        'entorno': os.getenv('FLASK_ENV', 'production'),
        'version': '1.0.0'
    })

Manejo de peticiones preflight

Flask-CORS maneja automáticamente las peticiones preflight (OPTIONS), pero podemos personalizar este comportamiento si necesitamos lógica adicional:

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=['http://localhost:3000'])

@app.before_request
def handle_preflight():
    if request.method == "OPTIONS":
        # Lógica personalizada para peticiones preflight
        print(f"Petición preflight desde: {request.headers.get('Origin')}")

@app.route('/api/datos', methods=['GET', 'POST', 'PUT', 'DELETE'])
def manejar_datos():
    if request.method == 'GET':
        return jsonify({'datos': 'información'})
    elif request.method == 'POST':
        return jsonify({'resultado': 'creado'}), 201
    elif request.method == 'PUT':
        return jsonify({'resultado': 'actualizado'})
    elif request.method == 'DELETE':
        return jsonify({'resultado': 'eliminado'})

Configuración con Blueprints

Cuando utilizamos Blueprints para organizar nuestra aplicación, podemos aplicar configuraciones CORS específicas a cada blueprint:

from flask import Flask, Blueprint, jsonify
from flask_cors import CORS

app = Flask(__name__)

# Blueprint para API pública
api_publica = Blueprint('api_publica', __name__, url_prefix='/api/publico')
CORS(api_publica, origins='*')

@api_publica.route('/noticias')
def obtener_noticias():
    return jsonify([{'titulo': 'Noticia 1'}, {'titulo': 'Noticia 2'}])

# Blueprint para API privada
api_privada = Blueprint('api_privada', __name__, url_prefix='/api/privado')
CORS(api_privada, origins=['https://admin.miapp.com'])

@api_privada.route('/usuarios')
def obtener_usuarios_admin():
    return jsonify([{'id': 1, 'email': 'admin@miapp.com'}])

# Registro de blueprints
app.register_blueprint(api_publica)
app.register_blueprint(api_privada)

Esta organización nos permite mantener políticas CORS diferenciadas según la funcionalidad de cada parte de nuestra API, garantizando que los endpoints públicos y privados tengan los niveles de acceso apropiados.