Google 嵌入在 Google 表格中的表单无法点击 - CORS 冲突

Question

我创建了一个电子表格，我使用沙盒 iframe 模式向其中显示 Google 表单。然而，当点击嵌入的 iframe 时，google 表单不响应点击。它似乎与 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 浏览器的控制台上收到以下消息。

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.

Answer 1

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

Answer 2

问题：

您正在下载 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 冲突

Google Forms embedded in Google Sheets Unclickable - CORS conflict

web-applications

google-sheets

cors

google-apps-script

google-forms

问题：

解决方案：

脚本：