Question

我试图通过嵌入式表单将表单数据发送到谷歌。

我发现此post似乎回答了我的问题，但我收到了CORS错误。有办法解决这个问题吗？

其他帖子似乎说CORS不是问题，但我收到了错误。

这是我的代码：

-JS-

function ajax_post() {
  var field1 = $('#email').val();

  $.ajax({
      url: "https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxx/formResponse",
      data: {"entry.xxxxxxxxxx": field1},
      type: "POST",
      dataType: "xml",
      statusCode: {
          0: function() {
          //Success message
          },
          200: function() {
          //Success Message
          }
      }
  });
}

-HTML -

<form id="emailForm" target="_self" onsubmit="" action="javascript: ajax_post()">
    <input id="email" type="text" autocomplete="off" tabindex="0" name="entry.xxxxxxxxxx" required>
    <button id="send" type="submit">Submit</button>
</form>

Answer 1

“No'Access-Control-Allow-Origin'标头出现在请求的资源上”消息表明来自https://docs.google.com/forms/d/e/xxxx/formResponse网址的回复目前不包含{{1响应标头，因此浏览器不允许您的前端JavaScript代码访问响应。

鉴于此，我猜你的前端代码无法判断Access-Control-Allow-Origin请求是否成功。但除非遇到任何其他问题，似乎请求将始终成功。如果请求根本没有到达服务器（由于某些网络错误），那么您将遇到可从您的前端代码观察到的不同故障情况，以便您可以实际捕获它。

所以我猜你知道请求已成功到达服务器的方式就是你没有得到任何其他可以从你的前端代码中观察到的失败。

Answer 2

我发现，以隐藏的iframe作为目标发布表单，并在提交响应时捕获iframe重新加载实际上更容易。

例如，如果这是您的表格：

<form id="my-form" target="my-response-iframe" action="https://docs.google.com/forms/u/1/d/e/<YOUR-ID>/formResponse" method="post">
  <input type="text" name="entry.12345678" value="" required>
  <input type="submit">
</form>

然后在同一页面上包含一个iframe，该iframe的ID和名称应与您作为目标使用的形式相同：

<iframe id="my-response-iframe" name="my-response-iframe"></iframe>

提交表单后，应重新加载“已记录您的响应”的iframe。来自Google的页面。我们可以使用JavaScript捕获重新加载的内容，因此在您的表单和iframe之后添加此内容：

<script type="text/javascript">
   // set the target on the form to point to a hidden iframe
   // some browsers need the target set via JavaScript, no idea why...
   document.getElementById('my-form').target = 'my-response-iframe';
   // detect when the iframe reloads
   var iframe = document.getElementById('my-response-iframe');
   if (iframe) {
     iframe.onload = function () {
       // now you can do stuff, such as displaying a message or redirecting to a new page.
     }
   }
</script>

您无法检查响应是否已正确提交，因为您无法检查跨域iframe的内容（这将带来巨大的安全风险），因此只需假设如果重新加载此iframe，响应还可以。

您可以使用以下CSS隐藏iframe：

visibility: hidden
height: 1px;

如果您问我的话，会更干净，没有控制台错误或请求失败。

使用嵌入式谷歌表单浏览CORS

2 个答案: