AMP 表单响应在 google 缓存中不起作用

Question

我为我的网站创建了一个 AMP 页面，在我的桌面浏览器上一切正常，经过测试并在我的手机上正常工作，如果某些字段为空或无效，提交错误会正确显示错误消息，也, 成功提交后会正确显示提交成功消息。

当我将页面提交给 Google 以缓存 amp 页面时，我再次测试了表单，这次它没有显示错误或成功消息。但是如果表单提交有效，它会给我发邮件但不会显示成功消息。

表格html代码：

<form action-xhr="posts/submit.php" method="POST" class="contactForm" target="_top">
    <fieldset>
        <div class="formFieldWrap">
            <label class="field-title">Select a product:<span>(required)</span></label>
            <div class="select-style full-bottom">
            <select name="product">
                    <option selected="" disabled="">Select a Product</option>
                    <option value="product1">product 1</option>
                    <option value="product2">product 2</option>
            </select>
            </div>
        </div>                  
        <div class="formFieldWrap">
            <label class="field-title">Full Name:<span>(required)</span></label>
            <input type="text" name="fullname" value="" class="contactField" />
        </div>
        <div class="formFieldWrap">
            <label class="field-title">Telephone: <span>(required)</span></label>
            <input type="text" name="telephone" value="" class="contactField" />
        <div class="formFieldWrap">
            <label class="field-title">Email: <span>(required)</span>
            </label>
            <input type="text" name="email" value="" class="contactField" />
        </div>
        <input type="hidden" name="ps" value="amp_Homepage">
        <div class="formSubmitButtonErrorsWrap contactFormButton">
            <input type="submit" class="buttonWrap button bg-teal-dark contactSubmitButton" value="Start my claim" />
        </div>
    </fieldset>
    <div submit-success>
        <template type="amp-mustache">
            <span class="center-text color-green-dark"><strong>Congratulations {{fullname}}!</strong> You have successfully submitted your claim. You can expect a telephone call from My Claim Solved just to confirm a few details.</span>
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            <span class="center-text color-red-light"><strong>Oops!</strong> {{message}}</span>
        </template>
    </div>
</form>

PHP 页数：

<?php
$source_origin = trim($_REQUEST['__amp_source_origin']);//Security
if($source_origin != "https://example.com"){
echo "Not allowed origin";
return;
}
header('AMP-Access-Control-Allow-Source-Origin: https://example.com');
header('Content-Type: application/json; charset=UTF-8;'); 

$start = microtime(true);
$con=mysqli_connect("myip","myuser","mypass","mydb");


$Product = mysqli_real_escape_string($con, $_REQUEST['product']);
$FullName = mysqli_real_escape_string($con, $_REQUEST['fullname']);$FullName = ltrim($FullName);$FullNameMail = mysqli_real_escape_string($con, $_REQUEST['fullname']);
$Telephone = mysqli_real_escape_string($con, $_REQUEST['telephone']);
$Email = mysqli_real_escape_string($con, $_REQUEST['email']);
$Provider = mysqli_real_escape_string($con, $_REQUEST['provider']);
$PageSource = mysqli_real_escape_string($con, $_REQUEST['ps']);


if($Product != 'product1' && $Product != 'product2'){
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must select a product.'));
}elseif(empty($FullName) || strlen($FullName)<3) {
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must enter your full name.'));
}elseif (empty($Telephone) || strlen($Telephone)<9) {
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must enter a valid telephone number.'));
}elseif (!filter_var($Email, FILTER_VALIDATE_EMAIL)) {
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must enter a valid email address.'));
}else{

    // Send Email
    $To = "myemail@example.com";
    $Message = "bla bla";
    $Headers = "From: myemail@example.com";  
    mail($To, 'subject bla', $Message, $Headers); 


    echo json_encode(array("product"=>$Product,"fullname"=>$FullName,"telephone"=>$Telephone,"email"=>$IPAddress));
}

?>

Answer 1

只是为了让您知道它是如何修复的（感谢 ade 为我指明了正确的方向），我将 php 页面上的 headers 修改为以下内容：

header("access-control-allow-credentials:true");
header("access-control-allow-headers:Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token");
header("access-control-allow-methods:POST, GET, OPTIONS");
header("access-control-allow-origin:".$_SERVER['HTTP_ORIGIN']);
header("access-control-expose-headers:AMP-Access-Control-Allow-Source-Origin");
header("amp-access-control-allow-source-origin:https://".$_SERVER['HTTP_HOST']);
header("Content-Type: application/json");

AMP 表单响应在 google 缓存中不起作用

AMP form response not working in google cache

html

php

amp-html

accelerated-mobile-page