Incapaz de hacer compartir recursos de origen cruzado (CORS) solicitud a Google Web App Usando JS Fetch
Hice una aplicación web de Google que recibe solicitudes de correo y envía los datos a una hoja de Google. El código para la aplicación web es el siguiente:
var sheetName = 'Sheet'
var scriptProp = PropertiesService.getScriptProperties()
function setup () {
var doc = SpreadsheetApp.getActiveSpreadsheet()
scriptProp.setProperty('key', doc.getId())
}
function doPost (e) {
var lock = LockService.getScriptLock()
lock.waitLock(10000)
try {
var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
var sheet = doc.getSheetByName(sheetName)
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
// Gets the last row and then adds one
var nextRow = sheet.getLastRow() + 1
var newRow = headers.map(function(header) {
return header === 'timestamp' ? new Date() : e.parameter[header]
})
sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow, 'rows': newRow }))
.setMimeType(ContentService.MimeType.JSON)
}
catch (e) {
return ContentService
.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
.setMimeType(ContentService.MimeType.JSON)
}
finally {
lock.releaseLock()
}
}
El enlace para ver la hoja es: https://docs.google.com/spreadsheets/d/1w8M_Jlo4YKhkbTjlXbWybiTONjWylXSFFThNPo5e9CM/edit#gid=0
Quiero enviar datos a la hoja usando un botón en mi página web estática, así que hice que escribiera alguna JS básica que use etch para enviar una solicitud de correo. Me mantuve bloqueado por el requisito del preflight del cors ya que mi página es estática (organizada por Github Pages) y no tiene un servidor para responder al preflight del cors. Así que agregué heroína CORS en cualquier lugar y todavía no puedo conseguir nada para publicar en la hoja. He estado probando yendo a la niña. info, mi página estática (todavía en progreso) abriendo la consola depuradora y ejecutando el código. The JS fetch code:
fetch('https://cors-anywhere.herokuapp.com/https://script.google.com/macros/s/AKfycbyjt4Yg22ERgK3FS11UIPmGE1_sBLEt-kh0vRF37rAI3ujIu5DC/exec',
{
method: 'POST',
mode: 'cors',
headers: {'Origin': 'true', 'X-Requested-With': 'true', 'User-Agent': 'python-requests/2.23.0', 'Accept-Encoding': 'gzip, deflate', 'Accept': '*/*', 'Connection': 'keep-alive'},
body: {'Email': '[email protected]', 'Timestamp': 24},
}).then(response => console.log(response));
Regreso una respuesta con code=200 pero no hay datos que publiquen en la hoja.
Cosas que he verificado:
- La aplicación web funciona utilizando la línea de comandos para enviar una solicitud de correo con solicitudes de pitón
- El texto en mi cuerpo coincide exactamente con las columnas en la hoja
Podría necesitar ayuda.
La aplicación web se publica para que cualquiera pueda acceder a ella. Aquí está una captura de pantalla de la configuración: captura de pantalla
He añadido 'cache': 'no-cache', 'redirect': 'sigue' a mis cabeceras y todavía tiene la misma cosa. Aquí hay una captura de la consola. Consola log
Al mirar el historial de ejecución para el google web api, encontré que cuando presento una solicitud de correo usando JS CORS, la aplicación web ejecuta pero pone null en los puntos de datos.
Pregunta hecha hace 3 años, 4 meses, 28 días - Por quantumquill62b1
4 Respuestas:
-
El problema fue causado por no tener el cuerpo CORS ser formateado como un objeto JS FormData o algo que puede ser accedido por
var newRow = headers.map(function(header) { return header === 'timestamp' ? new Date() : e.parameter[header] })Cuando me presentaron un diccionario directamente en el cuerpo de solicitud de CORS, no creo que el e.parameter[header] estaba encontrando nada, así que estaba volviendo nulo. Esto explica por qué la aplicación google estaba funcionando pero introduciendo null. Mi prueba de confirmación fue hacer una página html en mi computadora con este formulario
y este script
¡Gracias por toda la ayuda!
Respondida el Dec 18, 2020 a las 07:55 - por codeglitch
Votos positivos: 0 | Votos negativos: 0 -
manejar doGet y doPost como una lucha que debo decir. Veo que te faltan llaves en la solicitud de correos de cliente. Intenta añadir cache: 'no-cache', redireccionar: 'seguir'. Cruzando mis dedos para que tu código funcione
Respondida el Dec 18, 2020 a las 08:05 - por bytebard
Votos positivos: 0 | Votos negativos: 0 -
El principal problema que estás experimentando es el bloqueo del navegador debido a la política de Same-Origin del CORS. Para solucionar este problema, necesitas configurar correctamente el manejo del CORS en tu aplicación web de Google.
Aquí hay algunos pasos que puedes seguir para habilitar el CORS en tu aplicación web de Google:
- En tu script de Google Apps Script, agrega lo siguiente al principio del archivo `doPost` para permitir que cualquier origen acceda a tu aplicación:
javascript function allowCors(e) { // Set CORS headers var headers = { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Max-Age': '86400', }; // Return headers if it is a preflight request if (e.requestMethod == 'OPTIONS') { return ContentService.createTextOutput() .setMimeType(ContentService.MimeType.JSON) .setHeaders(headers); } } function doPost(e) { allowCors(e); // Resto de tu código }- En tu llamada de fetch, asegúrate de enviar tu solicitud a la URL correcta. Parece que estás utilizando `https://script.google.com/macros/s/AKfycbyjt4Yg22ERgK3FS11UIPmGE1_sBLEt-kh0vRF37rAI3ujIu5DC/exec`, pero deberías cambiarla a la URL del proyecto en el editor de secuencias de comandos de Google.
- Asegúrate de que los datos que estás enviando en el cuerpo de la solicitud coincidan exactamente con las columnas en tu hoja de Google.
Una vez que hayas realizado estos cambios, prueba nuevamente tu solicitud fetch y deberías poder enviar datos a tu hoja de Google sin problemas. Si continúas experimentando problemas, revisa la consola de errores en el navegador para obtener más información sobre lo que podría estar saliendo mal.
Respondida el Dec 19, 2020 a las 07:52 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
Problemas de CORS
CORS (intercambio de recursos de origen cruzado) es un mecanismo de seguridad que restringe las solicitudes entre sitios web de diferentes orígenes. En tu caso, estás intentando enviar una solicitud desde tu página web estática (alojada en GitHub Pages) a una aplicación web de Google Apps Script. Como estos sitios tienen diferentes orígenes, se activa CORS y se requiere un paso previo (solicitud de opción) para verificar que la solicitud sea segura.
Pasos para resolver el problema de CORS
- Activa CORS en tu aplicación web de Google Apps Script:
<ul><li>Ve a "Recursos avanzados" en el Editor de secuencias de comandos.</li></ul> <ul><li>Activa la casilla de verificación "¿Este origen acepta solicitudes de CORS?".</li></ul> <ul><li>Agrega el origen de tu página web estática en la lista de orígenes permitidos (por ejemplo, "https://tu-pagina-web-estatica.github.io").</li></ul>- Agrega encabezados CORS a tu solicitud de obtención:
<ul><li>En tu JavaScript, agrega los siguientes encabezados a tu solicitud de obtención:</li></ul>fetch('https://script.google.com/macros/s/TU-ID-DE-SECUENCIA-DE-COMANDOS/exec', { mode: 'cors', headers: { 'Access-Control-Request-Method': 'POST', 'Access-Control-Request-Headers': 'Origin, X-Requested-With, User-Agent, Accept, Content-Type' }, ... });Esto le dice al servidor que tu solicitud es una solicitud previa y especifica los encabezados que deseas incluir en la solicitud real.
- Verifica tus credenciales:
<ul><li>Asegúrate de que estás usando las credenciales correctas para acceder a tu aplicación web de Google Apps Script. Si no estás seguro, vuelve a autorizar la aplicación.</li></ul>- Comprueba tu código JavaScript:
<ul><li>Verifica que el cuerpo de la solicitud contenga los datos correctos en el formato correcto. Asegúrate de que el nombre de las claves coincida con los encabezados de columna en tu hoja de cálculo.</li></ul>Si has seguido estos pasos y sigues teniendo problemas, intenta lo siguiente:
- Deshabilita temporalmente cualquier bloqueador de anuncios o extensiones: Algunas extensiones del navegador pueden interferir con las solicitudes CORS.
- Usa una herramienta de depuración de red: Inspecciona las solicitudes de red en tu navegador para verificar que los encabezados CORS se envían correctamente.
Respondida el Dec 19, 2020 a las 07:58 - por Gemini
Votos positivos: 0 | Votos negativos: 0