Cómo solucionar el error “Enable JavaScript and cookies to continue”

Este mensaje aparece cuando Cloudflare (u otro proxy de seguridad similar) bloquea la solicitud porque detecta que el navegador del cliente no cumple con los requisitos mínimos de seguridad: JavaScript deshabilitado o cookies rechazadas.

Pero si tú eres el desarrollador del sitio web y ves este mensaje en tu propio entorno de desarrollo o producción, el problema no es del usuario, sino de tu configuración del servidor o de la forma en que estás sirviendo la aplicación.

🔍 Causa raíz técnica

Cloudflare (o similar) inyecta una página de desafío (/cdn-cgi/challenge-platform/...) cuando:

• El cliente no pasa el JavaScript Challenge (no ejecuta JS).
• No envía cookies válidas (por ejemplo, __cf_bm, cf_clearance).
• El navegador es considerado "no confiable" (básicamente, un bot o scraper).
• O más común: Estás accediendo directamente al servidor detrás de Cloudflare sin pasar por el proxy, por lo que Cloudflare no puede completar su verificación y bloquea la solicitud.

Esto no es un bug de tu frontend, es un problema de infraestructura o configuración de red.

✅ Solución definitiva (según tu entorno)

🛠️ Caso 1: Estás en desarrollo local (accidentalmente bypassing Cloudflare)

Si usas localhost, 127.0.0.1, o una IP directa del servidor (por ejemplo, http://tu-servidor:3000), Cloudflare no interviene, pero tu app podría estar configurada para esperar headers o cookies que solo Cloudflare añade.

Solución:

1. Usa el dominio real (con Cloudflare activo) en desarrollo:

   • Edita tu /etc/hosts (Linux/macOS) o C:\Windows\System32\drivers\etc\hosts (Windows):

    127.0.0.1 tu-dominio.com
   

• Accede a http://tu-dominio.com (no a localhost).
• Asegúrate de que Cloudflare esté en modo Proxied (nube naranja activa).

1. O desactiva temporalmente el "Under Attack Mode" o "Browser Integrity Check" en Cloudflare:
   • Panel → Security → Settings → Desactiva Under Attack Mode.
   • Panel → Firewall → Rules → Busca reglas que bloqueen JS/no-cookie y desactívalas.

🛠️ Caso 2: Tu app no sirve JavaScript correctamente (después de pasar Cloudflare)

Si el desafío se muestra después de cargar la página, significa que:

• El JS no se descargó o falló al ejecutarse.
• Las cookies no se establecieron (por ejemplo, por SameSite=None; Secure faltante).

Solución:

1. Verifica que el archivo JS de Cloudflare se sirva correctamente:

   • Abre DevTools → Network → Filtra por js y busca /cdn-cgi/challenge-platform/....
   • Si devuelve 403, 404 o 5xx, hay un problema de regla de firewall o configuración de WAF.

2. Asegura que las cookies se establezcan correctamente:

   • Cloudflare usa cookies como __cf_bm y cf_clearance.
   • Si tu app usa Set-Cookie, debe incluir:

    Set-Cookie: cf_clearance=...; Path=/; Secure; HttpOnly; SameSite=None
   

• Si no usas HTTPS localmente, Cloudflare no establecerá cookies Secure.

1. Habilita JavaScript en tu servidor (si usas Cloudflare Workers o WAF personalizado):
   • Asegúrate de que no estés bloqueando POST /cdn-cgi/l/chk_js ni otros endpoints internos.

🛠️ Caso 3: Estás usando un proxy inverso (nginx/Apache) detrás de Cloudflare

Si usas nginx o Apache como proxy inverso, debes pasar los headers originales para que Cloudflare valide la sesión.

Solución (nginx):

location / {
    proxy_pass http://tu-backend;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header CF-Connecting-IP $remote_addr; # Opcional, pero útil
}

⚠️ Si omites X-Forwarded-For, Cloudflare no puede verificar la IP real y puede bloquear.

🧪 Prueba rápida para confirmar la causa

1. Abre tu sitio en modo incógnito (sin extensiones).
2. Usa DevTools → Network → Filtra por document.
3. Si ves una respuesta 200 con contenido HTML que contiene <span id="challenge-error-text">, el servidor está respondiendo el desafío → problema de configuración.
4. Si el JS falla al ejecutarse (error en consola), el problema es de carga de recursos.

💡 Pro-tip: Evita este error en desarrollo

• Usa Cloudflare Tunnel (cloudflared) para exponer tu localhost a través de Cloudflare:

  cloudflared tunnel --hostname tu-dominio.com --url http://localhost:3000

Esto simula el entorno real y evita desafíos falsos.

• En producción, nunca sirvas directamente desde el servidor (sin pasar por Cloudflare). Usa siempre el DNS apuntando al proxy.

✅ Solución final rápida (copiar y pegar):

Si estás en desarrollo, edita tu /etc/hosts para usar el dominio real y accede por HTTPS (o activa "SSL/TLS → Flexible" en Cloudflare).

Si estás en producción, revisa tus reglas de Firewall y asegura que X-Forwarded-For se pase correctamente en el proxy inverso.