La Política de Mismo Origen (SOP, por sus siglas en inglés) es un mecanismo de seguridad fundamental implementado por los navegadores para restringir la interacción entre documentos o scripts cargados desde diferentes orígenes. Se considera un origen idéntico cuando el protocolo, el dominio y el puerto coinciden exactamente.

Por ejemplo, si intentamos realizar una petición desde una aplicación que corre en http://servidor-a.com:8000 hacia http://servidor-b.com:8001, el navegador bloqueará la respuesta por defecto para proteger la integridad de los datos del usuario.

# Error típico en la consola del navegador
Bloqueo de solicitud de origen cruzado: La política de mismo origen no permite la lectura de recursos remotos en http://servidor-b.com:8001/api/datos/. (Razón: Falta la cabecera CORS 'Access-Control-Allow-Origin').

Es importante destacar que la petición suele llegar al servidor y este procesarla; sin embargo, es el navegador el que impide que el código JavaScript acceda al resultado si las cabeceras de seguridad no son correctas.

Intercambio de Recursos de Origen Cruzado (CORS)

CORS es el estándar que permite a los servidores declarar quién tiene permiso para acceder a sus recursos desde un dominio externo. Este proceso es gestionado automáticamente por el navegador mediante el uso de cabeceras HTTP adicionales.

El navegador clasifica las solicitudes en dos categorías principales:

1. Solicitudes Simples

Se consideran simples si cumplen con los siguientes criterios:

• El método utilizado es GET, POST o HEAD.
• Solo se utilizan cabeceras automáticas o permitidas como Accept, Content-Type (limitada a application/x-www-form-urlencoded, multipart/form-data o text/plain), entre otras.

En estos casos, el navegador envía la petición directamente e incluye una cabecera Origin. El servidor debe responder con Access-Control-Allow-Origin para autorizar la lectura.

2. Solicitudes Complejas (Preflight)

Si la petición utiliza métodos como PUT o DELETE, o incluye cabeceras personalizadas (como Authorization o application/json), el navegador realiza una "comprobación previa" (preflight) utilizando el método OPTIONS.

• OPTIONS: El navegador pregunta al servidor si permite el método y las cabeceras específicas.
• Si el servidor responde afirmativamente, se procede a enviar la petición real con los datos.

Implementación en entornos Django

Para habilitar CORS en un proyecto Django, podemos manejar las cabeceras directamente en la respuesta de una vista o implementar un middleware global.

Configuración manual en una vista

Esta aproximación es útil para peticiones simples en endpoints específicos:

from django.http import JsonResponse

def consulta_perfil_usuario(request):
   data = {
       'id': 101,
       'username': 'dev_user',
       'status': 'active'
   }
   respuesta = JsonResponse(data)
   # Permitir acceso solo a un dominio específico
   respuesta["Access-Control-Allow-Origin"] = "http://frontend-app.com:3000"
   return respuesta

Implementación mediante Middleware para solicitudes complejas

Un middleware permite centralizar el control de seguridad y gestionar automáticamente las peticiones de tipo OPTIONS (preflight).

from django.utils.deprecation import MiddlewareMixin
from django import http

class GestionCorsMiddleware(MiddlewareMixin):
   def process_response(self, request, response):
       # Definimos el origen permitido
       response["Access-Control-Allow-Origin"] = "http://localhost:3000"
       
       # Si es una petición de verificación previa (Preflight)
       if request.method == "OPTIONS":
           response["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE, OPTIONS"
           response["Access-Control-Allow-Headers"] = "Content-Type, Authorization, X-Requested-With"
       
       return response

Al registrar este middleware en la configuración del proyecto, el servidor responderá correctamente a los navegadores modernos, permitiendo la comunicación fluida entre servicios desacoplados o arquitecturas de microservicios donde el frontend y el backend residen en diferentes dominios o puertos.