求助：Zoho自定义HTML表单AJAX提交遇CORS错误的解决方法

问题背景 #

无法使用iframe嵌入Zoho表单，只能将自定义HTML表单直接添加到页面中，但通过AJAX提交时触发了CORS错误，想了解如何正确发起请求并接收Zoho返回的数据。

遇到的错误 #

Access to XMLHttpRequest at 'https://forms.zohopublic...t' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

疑问 #

是否是本地运行脚本导致的错误？部署到服务器后能否正常工作？

相关代码 #

<script>
    $(document).ready(function() {
        $("#submit-button").click(function(e) {
            e.preventDefault();
            console.log($("#form-id").serialize());
                $.ajax({
                type: "POST",
                url: "https://forms.zohopublic.com/teste/form/Bemvindo/formperma/BBRMrFc6LR/htmlRecords/submit'",
                data: $("#form-id").serialize(),
                success: function(response) {
                    console.log(response);
                },
                error: function(error) {
                    console.log(error);
                }
            });
        });
    });
</script>

<form action='https://forms.zohopublic.com/teste/form/Bemvindo/formperma/BBRMrFc6LR/htmlRecords/submit' name='form' method='POST'>
     <label>First Name:</label>
    <input type="text" maxlength="255" name="name" placeholder="" />
      <label>Email</label>
    <input type="text" maxlength="255" name="email" placeholder="" />
</form>   

解决方案 #

1. 本地运行的CORS问题原因 #

本地直接打开HTML文件使用的是file://协议，此时请求的origin为null，Zoho服务器不会允许这类来源的跨域请求，因此本地测试必然触发CORS错误。部署到拥有合法域名的服务器后，origin会变为你的域名，但能否正常提交还需看Zoho是否允许该域名的跨域请求。

2. 代码中的两处问题 #

• AJAX的url末尾多了一个单引号，会导致请求地址无效，需删除；
• 代码用$("#form-id")选择表单，但form标签未设置id="form-id"，仅存在name="form"，导致serialize()无法正确获取表单数据。需给form添加id="form-id"，或把选择器改为$("form[name='form']")。

3. 可行的提交方案 #

方案一：原生表单提交（无需AJAX）

如果不需要在页面内处理返回数据，直接给表单添加submit按钮，让浏览器原生提交即可，完全不会有CORS问题：

<form id="form-id" action='https://forms.zohopublic.com/teste/form/Bemvindo/formperma/BBRMrFc6LR/htmlRecords/submit' name='form' method='POST'>
     <label>First Name:</label>
    <input type="text" maxlength="255" name="name" placeholder="" />
      <label>Email</label>
    <input type="text" maxlength="255" name="email" placeholder="" />
    <button type="submit">提交</button>
</form>

方案二：后端代理请求（支持AJAX并接收响应）

如果必须用AJAX提交并获取返回数据，最可靠的方式是通过自己的后端服务器做代理：

• 前端AJAX将表单数据提交到自身后端接口；
• 后端接口接收数据后，向Zoho表单提交地址发起POST请求；
• 后端将Zoho返回的数据转发给前端。
  这种方式因后端请求不受浏览器CORS策略限制，不会出现跨域问题。

方案三：检查Zoho表单的跨域设置

部分表单服务支持添加允许的域名到跨域白名单，可登录Zoho表单后台查看相关设置，将服务器域名添加进去，部署后AJAX请求可能就能正常发起。

内容的提问来源于stack exchange，提问作者Jessica Boaventura