Cómo Solucionar el Error CORS Access-Control-Allow-Origin de Forma Definitiva

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

El error de Intercambio de Recursos de Origen Cruzado (CORS, por sus siglas en inglés) es un mecanismo de seguridad implementado por los navegadores web. Su función principal es restringir las solicitudes HTTP de origen cruzado por motivos de seguridad, impidiendo que un sitio web cargue recursos de un dominio, puerto o protocolo diferente al suyo a menos que el servidor de destino lo autorice explícitamente.

Cuando ves el mensaje de error No 'Access-Control-Allow-Origin' header is present on the requested resource en la consola del desarrollador, significa que tu aplicación frontend (por ejemplo, React, Angular o Vue) está intentando realizar una petición a una API en otro servidor, pero este último no ha devuelto la cabecera HTTP requerida para validar la comunicación.

Causas principales del error CORS

• El backend no está configurado para enviar la cabecera HTTP Access-Control-Allow-Origin.
• Hay un desajuste entre el protocolo (HTTP vs HTTPS) o los puertos de origen y destino.
• El navegador bloquea una petición pre-vuelo (Preflight Request) que utiliza el método OPTIONS.
• Uso de credenciales o cookies en la petición sin la configuración de CORS correspondiente en el servidor.

Método 1: Solución en Node.js y Express

Si tu backend está desarrollado en Node.js utilizando el framework Express, la solución más rápida y robusta es utilizar el middleware oficial de CORS. Para implementarlo, sigue estos pasos:

1. Instala el paquete CORS en tu proyecto ejecutando: npm install cors
2. Importa y configura el middleware en tu archivo principal de servidor (por ejemplo, app.js o index.js):

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

// Permitir peticiones desde cualquier origen de forma temporal para pruebas
app.use(cors());

// O limitar el acceso a un dominio específico para producción:
// app.use(cors({ origin: 'https://midominio.com' }));

Método 2: Solución en PHP

Si tu servidor backend está desarrollado en PHP puro, debes enviar las cabeceras CORS necesarias antes de que se envíe cualquier salida HTML o JSON al cliente. Puedes lograrlo añadiendo las siguientes líneas al principio de tu script PHP principal:

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

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

La última sección de este script PHP es crucial, ya que maneja las solicitudes pre-vuelo (OPTIONS) enviadas automáticamente por el navegador antes de procesar métodos complejos como POST o PUT.

Método 3: Configuración en el Servidor Web (Nginx o Apache)

En ocasiones, es más eficiente resolver el problema de raíz a nivel de infraestructura, configurando el servidor web para que inyecte de manera automática las cabeceras HTTP necesarias en cada respuesta.

En Apache (.htaccess): Añade las siguientes directivas en tu archivo de configuración de directorio o archivo .htaccess:

<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</IfModule>

En Nginx: Modifica el bloque de configuración de tu servidor (generalmente dentro de /etc/nginx/sites-available/default) agregando estas líneas dentro del bloque location:

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';

Recuerda reiniciar el servicio Nginx con el comando sudo systemctl restart nginx para aplicar los cambios de configuración de forma segura.