Solución: Error CORS en JavaScript (Access-Control-Allow-Origin)

¿Por qué ocurre?

El navegador bloquea peticiones HTTP a un dominio diferente al de tu web por seguridad (Same-Origin Policy). Esto ocurre cuando tu frontend (localhost:3000) hace fetch a una API en otro puerto u otro dominio que no envía la cabecera 'Access-Control-Allow-Origin'.

Solución paso a paso

En desarrollo — usa un proxy en tu bundler:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

Ahora haz fetch a /api/users (sin el dominio), y Vite redirige la petición.

En el backend — añade las cabeceras CORS:

// Express.js
import cors from 'cors';
app.use(cors({ origin: 'https://tu-frontend.com' }));

# FastAPI
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(CORSMiddleware, allow_origins=["https://tu-frontend.com"],
                   allow_methods=["*"], allow_headers=["*"])

⚠️ Nunca hagas esto en producción:

// ❌ Permite CUALQUIER origen — inseguro
app.use(cors({ origin: '*' }));// ✅ Especifica los dominios permitidos
app.use(cors({ origin: ['https://miapp.com', 'https://admin.miapp.com'] }));

Cómo evitarlo en el futuro

Configura CORS en el backend desde el primer día. En desarrollo usa el proxy del bundler (Vite, webpack) en vez de desactivar CORS. Nunca uses origin: '*' en producción. Si usas una API de terceros que no permite CORS, crea una ruta proxy en tu propio backend.