Gmail中AMP表单无法提交至后端的问题求助

问题概述 #

开发了包含两个表单的AMP动态邮件：

• 第一个表单含按钮和预定义值的hidden字段stem，提交后后端向指定用户发送OTP；
• 提交成功后显示第二个表单，用户输入验证通过的OTP提交至后端兑换积分。
  该表单在AMP playground中提交正常，但Gmail中请求被拦截无法命中服务器，Chrome控制台报错：

[amp-form] Failed to parse response JSON: SyntaxError: "undefined" is not valid JSON.  [amp-form] Form submission failed: 404.

相关代码 #

AMP邮件HTML代码

<!doctype html>
<html amp4email data-css-strict>
   <head>
      <meta charset="utf-8">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <script custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js" async></script>
      <!--<script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>-->
      <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
      <meta name="a" content="width=device-width">
      <style amp4email-boilerplate>body{visibility:hidden}
      </style>
   </head>
   <body>
      <form method="post"
         action-xhr="action"
         on="submit-success:form2.show,form1.hide,AMP.setState({'otpReference': event.response.Data.OtpReference})" id="form1">
         <input type=hidden value="wdDDiFCG" name="stem">
         <input type="submit" value="Redeem Now!">
      </form>
      <form id="form2" method="post" action-xhr="action" hidden>
         <input type=hidden value="wdDDiFCG" name="stem" >
         <input type=hidden [value]="otpReference" name="otpReference" >
         <fieldset>
            <label>
            <span>Please enter OTP:</span>
            <input type="text"
               name="otp"
               required>
            </label>
            <input type="submit"
               value="Submit & Redeem">
         </fieldset>
         <button on="tap:form1.show,form2.hide">Back</button>
      </form>
   </body>
</html>

已配置的CORS规则

<add name="Access-Control-Allow-Headers" value="Content-Type" />  
<add name="Access-Control-Max-Age" value="600" />  
<add name="Access-Control-Allow-Origin" value="https://mail.google.com" /> 
<add name="AMP-Access-Control-Allow-Source-Origin" value="https://mail.google.com/dynamic-email/relay/v2/index.html" /> 
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
<add name="Access-Control-Expose-headers" value="AMP-Access-Control-Allow-Source-Origin" /> 
<add name="AMP-Email-Allow-Sender" value="amp@gmail.dev"/>

排查与解决方案 #

1. 修正action-xhr的URL
   代码中action-xhr="action"为相对路径，Gmail动态邮件环境无法解析，必须填写完整的后端API绝对URL（如https://your-domain.com/api/send-otp），这是导致404错误的核心原因。

2. 调整CORS配置

   • AMP-Access-Control-Allow-Source-Origin需设置为https://mail.google.com，不能带路径；
   • 确保后端响应OPTIONS预检请求时，正确返回所有必要CORS头；
   • Access-Control-Allow-Origin固定为https://mail.google.com即可，无需用*；
   • 后端响应必须返回合法JSON格式，即使成功状态也要返回{}或包含Data字段的JSON，避免解析错误。

3. 验证AMP邮件合规性
   使用AMP验证工具检查代码，确保符合AMP for Email规则，比如action-xhr必须为HTTPS协议，不能用相对路径。

4. 检查后端日志
   确认后端是否收到Gmail转发的请求（Gmail会作为代理转发），若未收到则CORS配置仍有问题；若收到但返回错误，排查后端逻辑是否正确处理Gmail请求头。

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