¿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. Su función es restringir las peticiones HTTP que se realizan desde un dominio diferente al que originó la página web. Si tu frontend intenta realizar una petición a una API alojada en otro servidor y este no responde con las cabeceras adecuadas, el navegador bloqueará la respuesta por seguridad.
La causa principal de este fallo es la ausencia de la cabecera HTTP Access-Control-Allow-Origin en la respuesta del servidor de destino, o una configuración restrictiva que no autoriza el dominio de tu cliente.
Método 1: Solucionar el error CORS en Node.js con Express
Si tienes control sobre el backend y utilizas Node.js con Express, la forma más eficiente de solucionar este problema es utilizando el middleware oficial de CORS.
- Instala el paquete oficial desde tu terminal ejecutando:
npm install cors- Importa el middleware y añádelo a tu aplicación Express para permitir peticiones desde cualquier origen:
const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors());- Si prefieres restringir el acceso y permitir únicamente tu dominio de producción, configúralo de la siguiente manera:
const corsOptions = { origin: 'https://tudominio.com', optionsSuccessStatus: 200 }; app.use(cors(corsOptions));
Método 2: Configurar las cabeceras CORS en un backend PHP
Si tu servidor backend está desarrollado en PHP, puedes solucionar el error agregando manualmente las cabeceras HTTP necesarias al inicio de tus scripts antes de enviar cualquier respuesta.
- Abre tu archivo de entrada principal (por ejemplo, index.php o api.php).
- Añade el siguiente fragmento de código al inicio del archivo:
header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With"); header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");- Por motivos de seguridad, es recomendable cambiar el asterisco (*) por el dominio específico de tu aplicación web para evitar que terceros consuman tu API sin permiso:
header("Access-Control-Allow-Origin: https://mi-cliente-frontend.com");
Método 3: Habilitar CORS en el servidor web (Apache o Nginx)
Si no deseas modificar el código de tu aplicación, puedes configurar directamente tu servidor web para que inyecte las cabeceras necesarias en cada respuesta.
- Para servidores Apache (.htaccess): Añade las siguientes líneas a tu archivo .htaccess:
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule>- Para servidores Nginx: Añade la siguiente directiva dentro de tu bloque de configuración de servidor o ubicación:
add_header Access-Control-Allow-Origin *;