Aplicación web de Google Apps Script activa la política CORS

Solución a Problemas de CORS en Google Apps Script

Si has estado desarrollando una aplicación web utilizando Google Sheets como base de datos a través de Google Apps Script, es probable que te hayas encontrado con problemas relacionados con la política de CORS (Cross-Origin Resource Sharing). Este artículo busca resolver la cuestión de por qué ciertas solicitudes son bloqueadas por esta política y cómo solucionarlo.

Entendiendo el Problema

En tu código, intentas hacer una solicitud fetch desde un frontend en React.js a una URL de Google Apps Script que incluye un camino específico (por ejemplo, /Employees). Sin embargo, la respuesta que obtienes indica un bloqueo por parte de la política de CORS. El error específico es:

Access to ' (link) ' from origin 'localhost:3000' 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.

Esto significa que el servidor no está permitiendo que tu frontend acceda a los recursos requeridos debido a restricciones de seguridad.

¿Cómo Solucionar Este Problema?

Para resolver el problema de CORS en Google Apps Script, puedes seguir los siguientes pasos:

1. Modifica la respuesta de tu script: Debes agregar los encabezados necesarios para permitir el acceso desde otros orígenes. Puedes hacerlo añadiendo el encabezado Access-Control-Allow-Origin en la función doGet para que responda a las solicitudes de diferentes orígenes.

   Aquí tienes un ejemplo de cómo hacerlo:

   function doGet(e) {
     let output = "";
     path = e.pathInfo.split("/");
     switch (path[0]) {
        case "Employees":
           output = path.length > 1 ? getEmployeeByName(path[1]) : getAllEmployees();
           break;
        case "Tasks":
           output = getAllTasks();
           break;
     }
     const response = ContentService.createTextOutput(JSON.stringify(output))
        .setMimeType(ContentService.MimeType.JSON);
   
     // Agregar encabezado CORS
     response.appendHeader("Access-Control-Allow-Origin", "*");
     response.appendHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
     return response;
   }

2. Manejar solicitudes preflight: Las solicitudes de tipo OPTIONS a menudo son enviadas por el navegador para verificar qué métodos HTTP están permitidos. Asegúrate de que tu script pueda manejar estas solicitudes:

   function doGet(e) {
     if (e.parameter.method === "OPTIONS") {
        return ContentService.createTextOutput()
           .appendHeader("Access-Control-Allow-Origin", "*")
           .appendHeader("Access-Control-Allow-Methods", "GET, OPTIONS")
           .setMimeType(ContentService.MimeType.JSON);
     }
     // Resto de tu lógica...
   }

3. Asegúrate de usar los métodos HTTP correctos: Verifica que estás utilizando el método GET en tu llamada fetch y asegúrate de que tu aplicación también maneje posibles errores en caso de que la respuesta del servidor no sea la esperada.

Conclusión

Solucionar problemas de CORS puede ser complicado, pero una vez que comprendas cómo funcionan las políticas de acceso y los encabezados necesarios, podrás adaptar tu código de Google Apps Script de manera efectiva. Al agregar los encabezados correctos y asegurarte de manejar las solicitudes preflight, podrás resolver el problema de acceso y hacer que tu aplicación web funcione sin problemas. ¡Prueba estas soluciones y mejora la interoperabilidad de tu aplicación!