AMP PHP联系人表单不重定向（谷歌AMP）

Question

我有AMP中的HTML表单，带有POST操作；电子邮件的PHP文件使用Sendgrid API。我尝试了Json重定向的headers响应，但不起作用。

出于这个原因，我应用了JavaScript重定向（是的，我知道，这会为AMP验证生成错误，但我需要重定向到跟踪在线转换的感谢页面）。

PHP文件工作正常，所有电子邮件都是发送的，但没有JavaScript重定向，只有电子邮件发送的div成功或错误，只有我看到发送电子邮件的错误，但是，矛盾的是，所有电子邮件都是发送的（通过Sendgrid API，LOL没有问题）。

所以，我需要重定向超文本标记语言联系表单与正确的PHP头Json响应（没有JavaScript），跟踪在线转换和正确验证我的AMP超文本标记语言源。在其他情况下，我认为它是非常有用的使一个正确的重定向从PHP文件后成功提交（我尝试重定向与头位置在PHP，但，不工作...）

表格：

<form method="post"
  class="p2"
  action-xhr="//example.com/path/themex/amp-theme/path/file.php"
  target="_top">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      placeholder="Nombre"
      required>
    <input type="tel"
      class="block border-none p0 m0"
      name="tel"
      placeholder="Teléfono"
      required>
  </div>
  <select name="store"
      id="store">
      <option value="San Antonio">San Antonio</option>
      <option value="Santiago Centro">Santiago Centro</option>
      <option value="San Bernardo">San Bernardo</option>
      <option value="Puente Alto">Puente Alto</option>
      <option value="Rancagua">Rancagua</option>
      <option value="Chillán">Chillán</option>
      <option value="Talca">Talca</option>
      <option value="Concepción">Concepción</option>
      <option value="Los Ángeles">Los Ángeles</option>
      <option value="Linares">Linares</option>
      <option value="Valdivia">Valdivia</option>
      <option value="Temuco">Temuco</option>
      <option value="Puerto Montt">Puerto Montt</option>
    </select>
    <label for="sucursal"
      class="absolute top-0 right-0 bottom-0 left-0">Selecione una Ciudad</label>
  <input type="submit"
    value="Enviar"
    class="ampstart-btn caps" onclick="redirectThanks()">
    				        <script>
function redirectThanks() {
    window.location = "https://www.example.com/thanks-page/amp/";
}
</script>
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks {{name}} for trying the
      <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
      <code>amp-form</code> handles errors.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Thanks {{name}} for trying the
      <code>amp-form</code> demo with an error response.
    </template>
  </div>
</form>

PHP帖子：

<?php
/*SendGrid Library*/
require_once ('vendor/autoload.php');

/*Post Data*/
$name = $_POST['name'];
$tel = $_POST['tel'];
$store = $_POST['store'];

/*Content*/
  $from = new SendGrid\Email("Sender", "[e-mail]");
$subject = "My Subject {$store}";
$to = new SendGrid\Email("Recipient", "[e-mail]");
$content = new SendGrid\Content("text/html", "
	Name: {$name}<br>
	Phone: {$tel}<br>
	Store: {$store}
	");

/*Send the mail*/
$mail = new SendGrid\Mail($from, $subject, $to, $content);
$apiKey = ('mysendgridapikeyhash');
$sg = new \SendGrid($apiKey);

/*Response*/
$response = $sg->client->mail()->send()->post($mail);

header("Content-type: application/json");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: https://www.example.com/");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
header ('AMP-Redirect-To: https://www.example.com/thanks-page/amp/');

?>

有什么想法吗？

Answer 1

我注意到您指定了一个Access Control Expose Headers标头，并且只添加了AMP Access Control Allow Source Origin。amp表单文档说明amp重定向到的内容也需要公开。

试试这个：

header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin, AMP-Redirect-To");

如果这不起作用，请尝试打开浏览器开发人员工具，并在问题中添加任何控制台错误。如果出现任何问题，AMP框架通常会在控制台中编写非常有用的错误消息，这些消息对于诊断问题非常有用。