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

¿Qué es el error CORS y por qué ocurre?

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web modernos para restringir que scripts ejecutados en una página web realicen solicitudes HTTP a un dominio diferente al que sirvió la página original. Aunque es vital para la seguridad, suele frustrar a los desarrolladores durante la integración de APIs.

Causas principales del bloqueo CORS

• El servidor backend no incluye las cabeceras HTTP necesarias (Access-Control-Allow-Origin).
• Intento de consumir una API desde un origen (dominio, protocolo o puerto) no autorizado.
• Solicitudes con credenciales (cookies o tokens de autorización) bloqueadas por políticas estrictas.
• Falta de manejo adecuado para las solicitudes de sondeo previo (OPTIONS preflight requests).

Método 1: Solucionar CORS en Node.js usando Express

Si tu API está construida con Node.js y Express, la forma más sencilla de solucionar este problema es utilizando el paquete oficial cors.

1. Instala el paquete en 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();
app.use(cors()); // Habilita CORS para todas las rutas

Si necesitas restringir el acceso a un dominio específico, puedes configurarlo de la siguiente manera:

const corsOptions = { origin: 'https://tu-dominio-frontend.com' };
app.use(cors(corsOptions));

Método 2: Configurar las cabeceras HTTP manualmente en PHP

Si estás desarrollando un backend en PHP sin frameworks modernos, debes inyectar las cabeceras CORS directamente al inicio de tu script PHP antes de cualquier salida de datos.

1. Abre tu archivo de punto de entrada (por ejemplo, api.php o index.php).
2. Agrega el siguiente fragmento de código al inicio del archivo:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

Si el navegador envía una solicitud de prueba tipo OPTIONS, asegúrate de finalizar la ejecución inmediatamente para evitar errores de procesamiento:

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
http_response_code(200);
exit();
}

Método 3: Usar un proxy inverso durante el desarrollo local

Si estás utilizando herramientas de desarrollo como React (Create React App), Vite o Vue CLI, configurar un proxy en tu archivo de configuración local evitará por completo los errores CORS mientras desarrollas.

1. Si usas Vite, abre tu archivo vite.config.js.
2. Añade la sección de proxy dentro del objeto server:

export default defineConfig({
server: {
proxy: {
'/api': {
target: 'https://api.tu-servidor-externo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});