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 o Intercambio de Recursos de Origen Cruzado) es un mecanismo de seguridad implementado por los navegadores web. Este mecanismo restringe las solicitudes HTTP que se realizan desde un script que corre en un dominio hacia un recurso ubicado en un dominio diferente, protegiendo así a los usuarios de ataques maliciosos como el robo de datos.

Cuando intentas hacer un fetch o una petición Axios desde tu aplicación frontend (por ejemplo, http://localhost:3000) hacia una API en otro servidor (por ejemplo, https://api.tuservidor.com) sin la configuración adecuada, el navegador bloquea la respuesta y muestra en la consola un mensaje similar a: Access to fetch at '...' from origin '...' 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 backend no incluye las cabeceras HTTP necesarias para permitir peticiones desde otros orígenes.
• Estás intentando consumir una API pública o propia que no ha autorizado explícitamente el dominio desde el cual realizas la consulta.
• Falta de configuración para métodos HTTP específicos (como PUT, DELETE o solicitudes con cabeceras personalizadas) que activan peticiones de sondeo (preflight requests con OPTIONS).

Método 1: Configurar las Cabeceras HTTP en el Servidor (Node.js / Express)

La forma más robusta y recomendada de solucionar CORS es configurando tu servidor backend para que acepte solicitudes del origen de tu aplicación frontend. Si utilizas Node.js con Express, puedes hacerlo utilizando el middleware oficial cors.

1. Instala el paquete cors en tu proyecto ejecutando el siguiente comando en tu terminal: npm install cors
2. Importa y utiliza el middleware en tu archivo principal de servidor (ej. server.js o app.js):

const express = require('express');
const cors = require('cors');
const app = express();
// Habilitar CORS para todas las rutas
app.use(cors());
app.listen(5000, () => console.log('Servidor corriendo en puerto 5000'));

Si deseas restringir el acceso únicamente a tu dominio de producción, puedes configurar las opciones de la siguiente manera:

const corsOptions = {
origin: 'https://tuappfrontend.com',
optionsSuccessStatus: 200
};
app.use(cors(corsOptions));

Método 2: Utilizar un Servidor Proxy durante el Desarrollo

Si estás desarrollando localmente y no tienes acceso al código del servidor backend para modificar las cabeceras CORS, puedes utilizar un proxy inverso en tu entorno de desarrollo local (por ejemplo, configurándolo en Vite o React/Vue CLI).

1. Si utilizas Vite, abre tu archivo vite.config.js y añade la propiedad server.proxy:

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

Al realizar tus peticiones en JavaScript utilizando rutas relativas como /api/recurso, el entorno de desarrollo redirigirá la petición simulando que proviene del mismo origen, evitando por completo el bloqueo CORS del navegador.