嵌入在 Google 表格中的 Google 表单不可点击 - CORS 冲突 [英] Google Forms embedded in Google Sheets Unclickable - CORS conflict

问题描述

我创建了一个电子表格，我使用沙盒 iframe 模式从中显示 Google 表单.但是，当点击嵌入的 iframe 时，谷歌表单不会响应点击.它似乎与 CORS 有关，因为如果我启用我的 CORS 抑制器插件，它就会变成可点击的.但是，我不想在安装该功能的每台计算机上都安装 CORS 插件.我该如何解决每个访问电子表格的人的问题?

I have created a spreadsheet to which I display Google Forms from it using the sandbox, iframe mode. However, the google forms do not respond to clicks, when clicking on the embedded iframe. It seems to be something related to CORS because if I enable my CORS suppresser plugin it becomes clickable. However, I don't want to have to install a CORS plugin on every computer I install the feature. How do I solve this problem to everyone accessing the spreadsheet?

function panel(){
  
  var form = FormApp.openById('formId');
  var formUrl = form.getPublishedUrl();
  
  var response = UrlFetchApp.fetch(formUrl);
  var formHtml = response.getContentText();
  
  var htmlApp = HtmlService
      .createHtmlOutput(formHtml)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('Form')
      .setWidth(600) 
      .setHeight(800);

  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}

每当我单击下一步时，我都会在 Google Chrome 浏览器的控制台上收到以下消息.

Whenever I click next I receive back the following messages on my console on Google Chrome Browser.

在 'https://www.gstatic.com//freebird//js/k=freebird.v.en.lcU4npEiYUw.O/rt=j/d=0/rs=AMjVe6hdoeb-_UmrKEHSn6K-MdbidWgqhw/m=syu,syv,syt,syw,syx,syy,syz,syj,sy10,sy1q,sy2n,sy31,KFVhZe' 来自原点 'https://n-tnjo46dbraljse3yd32xl22ypwhdx36fhlaiora-0lu-script.googleusercontent.com' 已被 CORS 策略阻止:没有Access-Control-Allow-Origin"标头出现在请求的资源.

Access to XMLHttpRequest at 'https://www.gstatic.com//freebird//js/k=freebird.v.en.lcU4npEiYUw.O/rt=j/d=0/rs=AMjVe6hdoeb-_UmrKEHSn6K-MdbidWgqhw/m=syu,syv,syt,syw,syx,syy,syz,syj,sy10,sy1q,sy2n,sy31,KFVhZe' from origin 'https://n-tnjo46dbraljse3yd32xl22ypwhdx36fhlaiora-0lu-script.googleusercontent.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

推荐答案

问题:

• 您正在下载 html 并尝试在您自己的 iframe 中提供它.这将被视为跨站点伪造，由于 CORS，浏览器将不允许这样做.
• Google 表单允许自己嵌入.

function panel(){
  
  var form = FormApp.openById('formId');
  var formUrl = form.getPublishedUrl(); // Should end in `/viewform`; If not, modify it accordingly.
  
//  var response = UrlFetchApp.fetch(formUrl);
//  var formHtml = response.getContentText();
  
  var htmlApp = HtmlService
      .createHtmlOutput('<h1>MY FORM</h1>')
      .append('<iframe src ="' + formUrl + '?embedded=true" width="700" height="520" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>')
      .setTitle('Form')
      .setWidth(750) 
      .setHeight(800);

  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}

这篇关于嵌入在 Google 表格中的 Google 表单不可点击 - CORS 冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！