miércoles 2 octubre 2024

Cómo configurar CORS en Express

CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad que permite controlar qué recursos pueden ser solicitados desde dominios diferentes al de origen. En Express, la configuración de CORS es fundamental para permitir que aplicaciones frontend y backend se comuniquen de manera segura.

Configurar CORS en Express

Para configurar CORS en una aplicación Express, se utiliza el paquete cors, que facilita la implementación de las reglas de acceso. A continuación se muestra cómo instalar y configurar este paquete.

Paso 1: Instalar el paquete `cors`

Primero, instala el paquete cors en tu proyecto:

npm install cors

Paso 2: Implementar CORS en la aplicación

Una vez instalado el paquete, debes incluirlo en el proyecto y aplicarlo como middleware. Aquí tienes un ejemplo básico:

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

// Configurar CORS
app.use(cors());

app.get('/datos', (req, res) => {
  res.json({ mensaje: 'CORS configurado correctamente' });
});

app.listen(3000, () => {
  console.log('Servidor ejecutándose en http://localhost:3000');
});

Con esta configuración básica, se permite el acceso a la API desde cualquier origen. Sin embargo, es recomendable restringir los dominios permitidos para mayor seguridad.

Paso 3: Configurar CORS con opciones personalizadas

Puedes configurar CORS con más control mediante opciones como origin, methods y credentials. A continuación se muestra un ejemplo donde solo se permite el acceso desde un dominio específico:

const corsOptions = {
  origin: 'http://example.com', // Permitir solo desde este dominio
  methods: ['GET', 'POST'],     // Métodos permitidos
  optionsSuccessStatus: 200     // Para resolver problemas con navegadores antiguos
};

app.use(cors(corsOptions));

Opciones avanzadas de configuración

Algunas de las opciones más utilizadas al configurar CORS son:

origin: Define qué dominios pueden acceder. Puede ser un string, un array de strings o incluso una función para reglas dinámicas.
methods: Especifica los métodos HTTP permitidos (GET, POST, PUT, etc.).
allowedHeaders: Controla los encabezados permitidos (Content-Type, Authorization, etc.).
credentials: Permite o no el uso de credenciales como cookies en las solicitudes (true o false).

Ejemplo de configuración completa

const corsOptions = {
  origin: ['http://example.com', 'http://localhost:3000'], // Múltiples orígenes permitidos
  methods: 'GET,POST,PUT,DELETE',  // Métodos permitidos
  allowedHeaders: ['Content-Type', 'Authorization'], // Encabezados permitidos
  credentials: true,               // Permitir uso de credenciales
  optionsSuccessStatus: 204         // Estado en respuestas preflight
};

app.use(cors(corsOptions));

Referencia oficial

Para más detalles y opciones avanzadas, consulta la documentación oficial del paquete CORS.

Etiquetas:

javascript nodejs express

Creado por:

Jorge García

Fullstack developer