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

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

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 sistema restringe las solicitudes HTTP que se realizan desde un script (como JavaScript usando fetch o axios) hacia un dominio, puerto o protocolo distinto al que sirvió la página original, conocido como política de mismo origen (Same-Origin Policy).

Cuando intentas consumir una API externa o un servidor backend que no ha configurado correctamente sus cabeceras HTTP, el navegador bloquea la respuesta y muestra en la consola un mensaje similar a: Access to fetch at 'https://api.ejemplo.com/datos' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Causas Principales del Bloqueo CORS

• El servidor de destino no incluye las cabeceras HTTP necesarias para autorizar peticiones desde otros orígenes.
• Estás intentando realizar una petición POST, PUT o DELETE y el navegador envía una solicitud previa de tipo OPTIONS (preflight request) que el servidor rechaza o no maneja correctamente.
• Desajustes de puertos o protocolos (por ejemplo, intentar conectar desde http://localhost:3000 a http://localhost:5000).

Método 1: Configurar las Cabeceras CORS en el Servidor (Backend)

La forma más correcta y recomendada de solucionar CORS es configurar el servidor backend para que permita explícitamente el acceso desde tu origen. Dependiendo de la tecnología que uses, debes añadir las cabeceras HTTP correspondientes o utilizar un middleware oficial.

Si utilizas Node.js con Express, puedes implementar el paquete cors de la siguiente manera:

1. Instala el paquete ejecutando: npm install cors
2. Importa y usa el middleware en tu archivo principal (ej. server.js):

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors()); // Permite peticiones de cualquier origen
app.listen(5000, () => console.log('Servidor corriendo'));

Método 2: Configurar un Proxy Inverso en el Entorno de Desarrollo

Si no tienes acceso al código del servidor backend y estás trabajando en local, puedes evitar el bloqueo CORS configurando un proxy en tu herramienta de desarrollo (como Vite, Webpack o React Scripts). Esto hace que el navegador crea que la petición se realiza al mismo dominio.

Si usas Vite, abre tu archivo vite.config.js y añade la siguiente configuración:

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

De esta forma, en tu código JavaScript harás la petición a /api/recurso en lugar de la URL completa, eliminando el conflicto de origen.

Método 3: Uso de Extensiones de Navegador para Pruebas Rápidas

Si solo necesitas probar una API rápidamente durante la fase de desarrollo local y el backend es totalmente ajeno a ti, puedes desactivar temporalmente las políticas CORS del navegador utilizando extensiones especializadas.

1. Instala una extensión como CORS Unblock o Allow CORS: Access-Control-Allow-Origin en Google Chrome o Mozilla Firefox.
2. Activa la extensión desde la barra de herramientas del navegador antes de ejecutar tu aplicación web local.
3. Recarga la página y verifica que las peticiones AJAX o fetch ya no arrojan el error en la consola. *(Nota: Desactiva esta opción al terminar tus pruebas, ya que disminuye la seguridad general de tu navegación).*