AMP表单提交报错：JSON解析失败及跨域头配置疑问

嘿，我之前也踩过AMP表单这个JSON解析的坑，咱们一步步来定位问题：

1. 核心问题：服务器返回的不是合法JSON #

你看到的SyntaxError: JSON.parse: unexpected end of data错误，90%的情况是因为表单处理脚本返回的内容不是标准JSON格式，或者干脆返回了空内容/HTML/纯文本。

• 直接访问你的amp-form-submit.php（或者用curl/Postman模拟POST请求），看看返回的内容是什么。AMP表单要求响应必须是严格的JSON结构，哪怕是成功提示，也得是类似{"success": true, "message": "提交成功"}的格式，不能是echo "提交成功"这种纯文本，也不能混着PHP错误提示、HTML代码。

2. 检查响应头是否配置完整 #

除了AMP-Access-Control-Allow-Source-Origin，还需要确保两个关键头：

• Content-Type: application/json：告诉浏览器返回的是JSON数据，PHP里可以用header('Content-Type: application/json');设置
• AMP-Access-Control-Allow-Source-Origin的值必须和你的AMP页面源完全匹配（比如https://yourdomain.com，协议、域名、端口一个都不能错）

3. 排查表单处理脚本的逻辑错误 #

如果脚本在执行过程中抛出警告、错误，这些输出会直接破坏JSON结构：

• 比如数据库连接失败时的PHP错误提示，或者你加的调试echo语句，都会导致返回内容不合法
• 临时排查可以在脚本开头加error_reporting(0);屏蔽错误输出，确保只有JSON内容被返回

4. 确认表单的action-xhr路径正确 #

如果amp-form-submit.php路径写错导致404，服务器返回的404页面HTML也会触发JSON解析错误。检查相对路径是否和当前AMP页面的位置匹配，或者直接用绝对路径测试。

一个合法的AMP表单处理PHP示例 #

<?php
// 必须设置的响应头
header("AMP-Access-Control-Allow-Source-Origin: https://your-amp-domain.com");
header("Content-Type: application/json");

// 处理表单数据（示例：接收POST参数）
$username = $_POST['username'] ?? '';

// 构造标准JSON响应
$response = [
    "success" => true,
    "message" => "嗨 {$username}，你的提交已成功！"
];

// 输出JSON并终止脚本
echo json_encode($response);
exit;
?>

最后提醒：打开浏览器的网络面板，查看表单提交请求的Response标签页，直接看服务器返回的内容，这是最直接的排查方式。

内容的提问来源于stack exchange，提问作者Cat Named Dog