¿Cómo implementar CORS en tu API REST? Una guía completa

 ¿Qué es CORS y por qué es importante?

CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad que permite a un navegador hacer solicitudes a un servidor desde un dominio diferente al que sirvió la página original. Esto es fundamental para las aplicaciones web modernas que utilizan múltiples servicios y APIs.

¿Por qué es importante?

• Seguridad: Evita que un sitio web malicioso acceda a datos sensibles de otro sitio.
• Funcionalidad: Permite que las aplicaciones web se comuniquen con diferentes servicios, mejorando su experiencia de usuario.
• Desarrollo: Facilita el desarrollo de aplicaciones de una sola página (SPA) y aplicaciones híbridas.

¿Cómo funciona CORS?

Cuando un navegador realiza una solicitud a un servidor de un dominio diferente, envía un encabezado Origin que indica el dominio de la página que hizo la solicitud. El servidor responde con un encabezado Access-Control-Allow-Origin que especifica los orígenes permitidos. Si el origen de la solicitud coincide con uno de los orígenes permitidos, la solicitud se procesa; de lo contrario, se bloquea.

Implementando CORS en tu API REST

La implementación de CORS varía según el framework o lenguaje de programación que estés utilizando. A continuación, te presentamos algunos ejemplos comunes:

Node.js con Express

JavaScript

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'https://tudominio.com' // Reemplaza con tu dominio
}));

// ... tus rutas

Python con Flask

Python

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def hello():
    return jsonify({'message': 'Hello from Flask!'})

Java con Spring Boot

Java

@Configuration
@EnableCors(origins = "https://tudominio.com")
public class WebConfig implements WebMvcConfigurer {
    // ...
}

Configuración básica del encabezado Access-Control-Allow-Origin

Si prefieres configurar manualmente el encabezado, puedes hacerlo en la respuesta HTTP:

JavaScript

res.setHeader('Access-Control-Allow-Origin', 'https://tudominio.com');

Consideraciones adicionales

• Otros encabezados CORS: Además de Access-Control-Allow-Origin, hay otros encabezados importantes como Access-Control-Allow-Methods, Access-Control-Allow-Headers y Access-Control-Max-Age.
• Opciones de configuración: La configuración de CORS puede ser más compleja según tus necesidades. Consulta la documentación de tu framework para conocer todas las opciones disponibles.
• Seguridad: No permitas el acceso desde cualquier origen (*). Especifica los dominios permitidos para evitar vulnerabilidades.
• Preflight requests: Para ciertos métodos HTTP (como POST, PUT, DELETE), el navegador envía una solicitud OPTIONS antes de la solicitud real. Asegúrate de configurar tu servidor para responder correctamente a estas solicitudes.

👉 [Explora nuestro blog y domina el mundo de las APIs!]

Conclusión

Implementar CORS en tu API REST es esencial para permitir que tu aplicación web se comunique con otros servicios de manera segura y eficiente. Al seguir estos pasos y considerando las recomendaciones de seguridad, podrás garantizar que tu API sea accesible y confiable.