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

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

El error CORS (Cross-Origin Resource Sharing) es un mecanismo de seguridad implementado por los navegadores web modernos para restringir las solicitudes HTTP realizadas desde scripts hacia un dominio diferente al que sirvió la página original. Esta política de mismo origen (Same-Origin Policy) protege a los usuarios contra ataques de falsificación de peticiones en sitios cruzados (CSRF), pero suele ser un dolor de cabeza común para los desarrolladores web al conectar un frontend (por ejemplo, en React o Vue) con una API backend independiente (Node.js, PHP, Python, etc.).

Cuando tu aplicación JavaScript intenta consumir un recurso externo y el servidor no responde con los encabezados HTTP adecuados que autoricen el acceso, el navegador bloquea la respuesta y muestra un mensaje en la consola similar a: Access to fetch at 'https://api.ejemplo.com/datos' from origin 'http://localhost:3000' has been blocked by CORS policy.

Causas principales del bloqueo CORS

• Ausencia de cabeceras de control de acceso en el servidor de destino (Access-Control-Allow-Origin).
• Intentar realizar solicitudes con credenciales (cookies, tokens de autorización) sin la configuración previa en el cliente y el servidor.
• Peticiones con métodos HTTP no permitidos (como PUT, DELETE o encabezados personalizados) que activan una solicitud previa o preflight request (OPTIONS).
• Desajustes en los puertos, protocolos (HTTP vs HTTPS) o subdominios entre el cliente y la API.

Método 1: Configurar las cabeceras CORS en el Servidor (Backend en Node.js / Express)

La forma más robusta y recomendada de solucionar el error CORS es permitir los orígenes cruzados directamente desde el servidor que aloja la API. Si utilizas Node.js con Express, puedes implementar el paquete oficial cors siguiendo estos pasos:

1. Instala el paquete ejecutando el siguiente comando en la terminal de tu proyecto backend: npm install cors
2. Importa y configura el middleware en tu archivo principal (por ejemplo, app.js o server.js):

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

// Habilitar CORS para todas las rutas y orígenes
app.use(cors());

app.get('/api/data', (req, res) => { res.json({ mensaje: '¡CORS solucionado!' }); });
app.listen(3000, () => console.log('Servidor corriendo'));

Si necesitas restringir el acceso únicamente a tu dominio de producción, puedes personalizar la configuración pasando un objeto de opciones: app.use(cors({ origin: 'https://tuweb.com' }));

Método 2: Configurar un Proxy en el Entorno de Desarrollo (React / Vue / Vite)

Si estás desarrollando en local y no tienes acceso para modificar el código del servidor backend (por ejemplo, si consumes una API de terceros), puedes configurar un proxy reverso en tu herramienta de empaquetado o framework frontend para evitar las restricciones del navegador.

Si utilizas Vite para tu aplicación web, edita el archivo vite.config.js de la siguiente manera:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'https://api.ejemplo.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});

De esta forma, cuando hagas peticiones desde tu JavaScript a /api/recurso, Vite redirigirá la solicitud internamente simulando que proviene del mismo servidor, evitando por completo el bloqueo CORS del navegador.