表单与 AppScript 重定向问题(XMLHttpRequest 无法加载）

Form with AppScript redirect issue (XMLHttpRequest cannot load)

本文关键字：加载 XMLHttpRequest AppScript 重定向 问题 表单      更新时间：2023-09-26

我有一个非常基本的HTML <form>，在操作中调用Google Apps脚本URL，如下所示：https://script.google.com/macros/s/..../exec。应用脚本会将内容写入 Google 电子表格。我想在执行后将用户重定向回特定页面，这是我使用 jQuery 所做的，但我收到此错误：

XMLHttpRequest 无法加载 https://script.google.com/macros/s/AKfycbwg0ASXLu-2awVG_F02o5S1u1pUyrYNHaAQvxzrObFj-47vFE8/exec。
请求的资源上不存在"访问控制允许源"标头。
因此，不允许访问源"https://gtech-pubu.googlegoro.com"。

下面是整个表单和jQuery。有人告诉我我错过了什么吗？

< script type = 'text/javascript' >
  $("#courses").submit(function(event) {
    event.preventDefault();
    var $form = $(this),
      url = $form.attr('action');
    var posting = $.post(url, {
      name: $('#name').val(),
      product: $('#product').val(),
      clearness: $('#clearness').val(),
      rated: $('#rated').val(),
      helpful: $('#helpful').val()
    });
    posting.done(function(data) {
      alert('success');
    });
  }); < /script>

<form action="https://script.google.com/macros/s/AKfycbwg0ASXLu-2awVG_F02o5S1u1pUyrYNHaAQvxzrObFj-47vFE8/exec" method="post" id="courses">
  <h4>Ad Exchange Sell-Side Fundamentals Content Survey</h4>
  <fieldset>
    <legend><span class="number">1</span> Module Info</legend>
    <input type="hidden" name="name" value="TEST Sell-Side Fundamentals">
    <input type="hidden" name="product" value="TEST">
    <label>Select which module you wish to rate:</label>
    <select id="courses" name="clearness">
      <option value="extremely_clear">5: Extremely clear</option>
      <option value="moderately_clear">4: Moderately clear</option>
      <option value="clear_nor_unclear">3: Neither clear, nor unclear</option>
      <option value="moderately_unclear">2: Moderately unclear</option>
      <option value="extremely_unclear">1: Extremely unclear</option>
    </select>
    <label>Please rate the clarity of the content:</label>
    <select id="courses" name="rated">
      <option value="module1">Module 1</option>
      <option value="module2">Module 2</option>
      <option value="module3">Module 3</option>
      <option value="module4">Module 4</option>
      <option value="module5">Module 5</option>
      <option value="module6">Module 6</option>
      <option value="module7">Module 7</option>
      <option value="mobule8" selected>Module 8</option>
      <option value="module9">Module 9</option>
    </select>
  </fieldset>
  <fieldset>
    <legend><span class="number">2</span> Additional Info</legend>
    <label>Was this module helpful?</label>
    <select name="helpful" id="courses">
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
  </fieldset>
  <input type="submit" value="Apply" />
</form>
</div>

它是否在我需要配置的应用程序脚本中以允许跨域？

根据文档，您必须使用 JSONP 从 XMLHTTPRequest 中调用脚本...

https://developers.google.com/apps-script/guides/content#serving_jsonp_in_web_pages

尝试将 JSONP 作为最后一个参数传递给 $.post

var posting = $.post( url, {
    name: $('#name').val(), 
    product: $('#product').val(), 
    clearness: $('#clearness').val(),
    rated: $('#rated').val(),
    helpful: $('#helpful').val() 
}, 'jsonp' );

另外，我不知道您的脚本是什么样子的，但您可能需要添加 MIME 类型......

.setMimeType（ContentService.MimeType.JAVASCRIPT）

就像文档中的示例一样...

return ContentService.createTextOutput(
    request.parameters.prefix + '(' + JSON.stringify(result) + ')')
    .setMimeType(ContentService.MimeType.JAVASCRIPT);

注意：另外，以防万一您在文档中错过了它...

警告：在脚本中使用此 JSONP 技术时要非常小心。由于任何人都可以在其网页中嵌入脚本标记，因此当您访问恶意网站时，您可能会被诱骗执行脚本，然后可以捕获返回的数据。最佳做法是确保 JSONP 脚本是只读的，并且只返回非敏感信息。

相关文章：