嵌入在 Google 表格中的 Google 表单不可点击 - CORS 冲突答案

【问题标题】：Google Forms embedded in Google Sheets Unclickable - CORS conflict嵌入在 Google 表格中的 Google 表单不可点击 - CORS 冲突
【发布时间】：2019-08-02 23:02:30
【问题描述】：

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

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 浏览器的控制台上收到以下消息。

从源“https://n-tnjo46dbraljse3yd32xl22ypwhdx36fhlaiora-0lu-script.googleusercontent.com”访问“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”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

【问题讨论】：

您复习了哪些问题？您是否尝试过这些许多相关问题？
Embedding Google Apps Script in an iFrame的可能重复
此外，假设您可以在域 B 上提供来自分布式域（如 Google 表单）的完整页面是不正确的。正如您在此处观察到的那样，该内容期望它位于其生成的域中。
可能该解决方案与您发布的链接很接近，但是我无法将该特定解决方案应用于我的解决方案。你能帮我澄清一下吗？
我还尝试了此处和 github 中可用的所有 CORS 解决方法...没有成功

标签： google-apps-script google-sheets web-applications cors google-forms

【解决方案1】：

问题：

您正在下载 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);
}

【讨论】：

【解决方案2】：

也许您可以尝试打开您的表单，探索 (F12) 并将生成的 HTML 从您的脚本复制到一个新的 HTML 文件中，然后使用 HtmlService.createHtmlOutputFromFile 来利用它（而不是 FormApp 和 UrlFetchApp 的组合） ) ? 这样您可以更好地控制 HTML，但是您必须将表单上的每个更改复制到脚本中的 HTML 文件中...

【讨论】：