AMP缓存表单提交报错：沙箱未设置allow-forms权限

这个问题我之前也碰到过，根源是AMP缓存会把页面放在沙箱化的iframe里运行，和自有域名下的环境权限规则不一样，导致表单提交触发了沙箱限制。下面是具体的排查和解决步骤：

1. 先移除多余的target="_top"属性 #

你表单里的target="_top"是关键问题！AMP表单用action-xhr是做异步XHR提交的，不需要跳转页面，这个属性会触发浏览器的常规表单提交逻辑，而沙箱iframe默认没给allow-forms+allow-top-navigation的组合权限，直接就被拦截了。

把表单代码里的target="_top"删掉，改成这样：

<form method="post" class="p2 i-amphtml-form" action-xhr="https://******.co.uk/form_post.php" novalidate="">
  <!-- 表单内容 -->
</form>

2. 确认amp-form组件脚本已正确引入 #

如果你的AMP页面没加载amp-form的专用脚本，缓存环境下的表单逻辑会异常，一定要在页面<head>里加上：

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

同时别忘了基础的AMP runtime脚本：

<script async src="https://cdn.ampproject.org/v0.js"></script>

3. 检查后端CORS配置是否符合AMP要求 #

既然自有域名下没问题，大概率是后端对AMP缓存的域名没开放足够的CORS权限，要确保你的form_post.php返回这些响应头：

• Access-Control-Allow-Origin: * 或者更严格的https://*.cdn.ampproject.org
• Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin
• 处理OPTIONS预检请求，返回和POST请求一致的CORS头

4. 用AMP验证工具排查其他规范问题 #

有时候其他AMP规范错误会间接导致缓存处理异常，用AMP官方验证工具扫一遍你的页面，确保没有其他违规项。

按这几步调整后，再去AMP缓存里测试表单，应该就能正常提交了。

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