AMP 表单响应在谷歌缓存中不起作用答案

【问题标题】：AMP form response not working in google cacheAMP 表单响应在谷歌缓存中不起作用
【发布时间】：2018-05-07 09:14:45
【问题描述】：

我为我的网站创建了一个 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));
}

?>

【问题讨论】：

您是否检查过您已启用来自 Google 缓存的 CORS 请求？
小胡子的 JSON 在哪里？
action-xhr 应该是绝对 URL。

标签： php html amp-html accelerated-mobile-page

【解决方案1】：

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

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");

【讨论】：