Error CORS con Ngrok y servidor Express: «No se presenta el encabezado ‘Access-Control-Allow-Origin'» y 401 No autorizado

En el desarrollo de aplicaciones web modernas, especialmente al trabajar con React y el sistema de autenticación de Firebase, es común encontrarse con problemas relacionados con la configuración de CORS (Cross-Origin Resource Sharing). Uno de los errores más frecuentes es el mensaje: «No se presenta el encabezado ‘Access-Control-Allow-Origin'». Este problema se intensifica cuando se utiliza Ngrok para exponer un servidor local y se intenta comunicar con un backend en Express.

Descripción del problema

Recientemente, desarrollé una aplicación React que utiliza la autenticación de Firebase para iniciar sesión con Google. Tras un inicio de sesión exitoso, recupero el token ID de Firebase y lo envío a mi servidor Node.js/Express para su verificación. Sin embargo, al intentar iniciar sesión, me encuentro con errores en la consola del navegador relacionados con la política CORS.

Access to XMLHttpRequest at 'http://localhost:3005/api/verify-token' from origin 'https://e7e7-43-252-15-140.ngrok-free.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Configuración de mi entorno

Mi aplicación React está corriendo a través de Ngrok en https://e7e7-43-252-15-140.ngrok-free.app, y mi servidor Express está en http://localhost:3005.

Pasos realizados para solucionar el problema

• He añadido el middleware de CORS a mi servidor Express, especificando la URL de Ngrok como origen permitido.
• He verificado que el SDK de Firebase Admin esté correctamente inicializado en el servidor.
• Me aseguré de que el encabezado de autorización se está enviando desde la aplicación React.
• He revisado la lógica de verificación del token en el servidor.

Pregunta fundamental

A pesar de estas configuraciones, sigo recibiendo el error CORS y errores de red. ¿Hay algo incorrecto en mi configuración de CORS, o existe otro problema que estoy pasando por alto? ¿Cómo puedo configurar correctamente mi servidor Express para permitir solicitudes de origen cruzado desde mi URL de Ngrok?

Soluciones recomendadas

Para resolver el problema de CORS, asegúrate de seguir estos pasos:

• Asegúrate de tener el middleware CORS instalado: Ejecuta el siguiente comando:

npm install cors

• Configura correctamente el middleware CORS en tu servidor Express:

  const cors = require('cors');
  app.use(cors({ origin: 'https://e7e7-43-252-15-140.ngrok-free.app' }));

• Verifica la configuración de las rutas: Asegúrate de que la ruta ‘/api/verify-token’ esté correctamente definida en tu servidor Express.
• Prueba con un cliente REST: Usa herramientas como Postman para enviar solicitudes al servidor y verificar las respuestas sin la aplicación React.

Si sigues estos pasos y realizas las configuraciones necesarias, deberías poder resolver el error de CORS y continuar con el desarrollo de tu aplicación sin contratiempos.