Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) Paso a Paso

Introducción al Error CORS en el Desarrollo Web

Uno de los dolores de cabeza más comunes para los desarrolladores frontend y backend es el temido error de CORS (Cross-Origin Resource Sharing). Este mecanismo de seguridad de los navegadores web bloquea las solicitudes HTTP realizadas desde un dominio (origen) diferente al del servidor que aloja los recursos, interrumpiendo la comunicación entre tu API y tu aplicación web.

Causas Principales del Error CORS

El navegador bloquea la petición fetch o Axios debido a que:

• El servidor backend no incluye los encabezados HTTP (Headers) necesarios que autorizan el dominio de origen.
• Estás intentando conectar un frontend en desarrollo (por ejemplo, http://localhost:3000) con un backend en otro puerto o dominio sin permisos explícitos.
• El navegador realiza una solicitud previa de verificación (método OPTIONS) y el servidor responde con un código de error o sin los permisos requeridos.

Método 1: Solucionar CORS en el Servidor con Node.js y Express

La forma más rápida y recomendada de habilitar CORS en una aplicación de Node.js utilizando el framework Express es mediante el paquete oficial cors.

1. Instala el paquete en la raíz de tu proyecto ejecutando el siguiente comando en tu terminal:
   npm install cors
2. Importa y configura el middleware en tu archivo principal (ej. server.js o app.js):
   const express = require('express');
const cors = require('cors');
const app = express();
3. Habilita CORS para todas las rutas agregando esta línea antes de tus rutas:
   app.use(cors());
4. Si deseas restringir el acceso únicamente a tu dominio de producción, configura los orígenes permitidos:
   app.use(cors({ origin: 'https tusitio.com' }));

Método 2: Configurar Encabezados HTTP Manualmente en el Backend (PHP / Apache / Nginx)

Si no utilizas Node.js, puedes añadir los encabezados correspondientes directamente en la respuesta del servidor o en la configuración de tu servidor web.

1. En un script de PHP, añade las siguientes líneas al inicio de tu archivo de API:
   header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
2. Si usas Apache, puedes agregarlo en el archivo .htaccess:
   Header set Access-Control-Allow-Origin "*"

Conclusión

Solucionar el error CORS es fundamental para el correcto funcionamiento de aplicaciones web modernas desacopladas. Asegúrate de configurar correctamente los orígenes permitidos en producción para mantener la seguridad de tu API sin comprometer la conectividad con tu frontend.