Cómo Solucionar el Error 'No Access-Control-Allow-Origin' en Desarrollo Web

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

El error Access to fetch at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource se produce cuando una aplicación web intenta realizar una petición HTTP asíncrona (mediante Fetch API, Axios o AJAX) a un dominio, subdominio, protocolo o puerto diferente al de su propio origen.

Esta restricción es un mecanismo de seguridad implementado por los navegadores llamado Política del Mismo Origen (Same-Origin Policy). Si el servidor de destino no incluye explícitamente la cabecera HTTP Access-Control-Allow-Origin autorizando al origen solicitante, el navegador bloquea la respuesta por seguridad.

Causas comunes del error

• El backend de la API no tiene configuradas las cabeceras de control de acceso para responder a peticiones de orígenes cruzados.
• Fallo en la resolución de peticiones preflight (método OPTIONS) enviadas por el navegador antes de peticiones POST, PUT o DELETE complejas.
• Diferencia de puertos durante el desarrollo local (por ejemplo, frontend en localhost:3000 y backend en localhost:5000).

Método 1: Habilitar CORS en el backend (Node.js y Express)

La solución definitiva y estándar consiste en permitir el acceso directamente desde el servidor que procesa las solicitudes.

1. Instala el middleware oficial de CORS en tu proyecto Node.js ejecutando: npm install cors.
2. Importa y utiliza el middleware en tu archivo principal de servidor (por ejemplo, server.js o app.js):
   const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({ origin: 'http://localhost:3000' }));
3. Si necesitas permitir cualquier origen de forma pública, puedes invocarlo directamente como app.use(cors());, lo que añadirá la cabecera Access-Control-Allow-Origin: * a todas las respuestas.

Método 2: Configurar cabeceras en servidores Apache o Nginx

Si tu API o backend se ejecuta tras un servidor web tradicional, puedes inyectar las cabeceras de respuesta a nivel de servidor.

• Para Apache (.htaccess): Añade las siguientes líneas dentro de tu archivo de configuración o .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 "Content-Type, Authorization"
</IfModule>
• Para Nginx: Dentro del bloque location / de tu archivo de configuración, añade:
  add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

Método 3: Configurar un Proxy en el entorno de desarrollo Frontend

Si no tienes acceso para modificar el servidor backend durante la fase de desarrollo, puedes evitar las restricciones de CORS configurando un proxy local en herramientas como Vite, React o Angular.

1. En proyectos con Vite, edita tu archivo vite.config.js y añade la propiedad proxy dentro de server:
   export default {
server: {
proxy: {
'/api': {
target: 'https://api-ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
}
2. Realiza tus llamadas desde el código apuntando a la ruta relativa /api/recurso. Dado que la petición se realiza entre servidores (el servidor de desarrollo de Vite y la API), el navegador no aplicará el bloqueo de CORS.