Cómo Solucionar el Error CORS (Cross-Origin Resource Sharing) de Forma Definitiva

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

El error CORS (Cross-Origin Resource Sharing o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web modernos. Este mecanismo restringe las peticiones HTTP que se realizan desde un dominio (origen) hacia un dominio diferente, protegiendo así a los usuarios contra ataques de falsificación de peticiones en sitios cruzados (CSRF). Sin embargo, cuando estás desarrollando una aplicación web moderna donde el frontend y el backend están en servidores o puertos distintos, este bloqueo se convierte en un obstáculo común.

Causas principales del bloqueo CORS

El navegador bloquea la respuesta de una petición AJAX o Fetch cuando detecta que:

• El dominio, protocolo o puerto del servidor que recibe la petición es diferente al de la aplicación cliente.
• El servidor backend no incluye las cabeceras HTTP necesarias para autorizar el origen de la petición.
• Se intenta enviar credenciales (como cookies o tokens de autorización) sin la configuración adecuada en ambos extremos.
• Se realiza una petición de tipo preflight (usando el método OPTIONS) y el servidor no responde correctamente a dicha verificación.

Método 1: Solucionar CORS en el servidor (Node.js con Express)

La forma más limpia y recomendada de solucionar el error CORS es configurando correctamente tu servidor backend. Si estás utilizando Node.js con Express, puedes utilizar el paquete oficial cors.

1. Instala el paquete ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y habilita el middleware en tu archivo principal de configuración (ej. app.js o server.js):

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

Si necesitas restringir el acceso únicamente a tu dominio de producción, puedes configurar opciones específicas:

const corsOptions = { origin: 'https://tusitio.com', optionsSuccessStatus: 200 };
app.use(cors(corsOptions));

Método 2: Configurar cabeceras HTTP manualmente en servidores PHP o Apache

Si tu backend está desarrollado en PHP o estás sirviendo tu aplicación a través de un servidor web Apache, puedes inyectar las cabeceras necesarias directamente para permitir solicitudes de origen cruzado.

1. Si usas PHP, añade estas líneas al inicio de tu archivo de API (como api.php):

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

1. Si prefieres configurarlo a nivel de servidor Apache, añade el siguiente bloque dentro del archivo .htaccess de tu proyecto:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>

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

Cuando estás en fase de desarrollo y no tienes acceso para modificar el servidor backend de terceros o una API externa, la mejor solución es configurar un proxy inverso en tu entorno de desarrollo frontend.

1. Si utilizas un empaquetador como Vite o Vue CLI, puedes configurar un proxy en el archivo vite.config.js o vue.config.js:

export default {
server: {
proxy: {
'/api': {
target: 'https://api.serviciocorreto.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
}

1. De esta forma, tus peticiones locales hechas a /api/recurso serán redirigidas por tu propio servidor de desarrollo local, evitando completamente las restricciones CORS del navegador.