1

我正在开发一个使用 AMP 的现有静态站点（仅 HTML 和 Javascript）。我需要添加一个向第三方服务提交 POST 请求的表单。该服务仅接受 POST 请求。

当我使用普通 HTML 添加表单时，出现以下错误。

只有基于 XHR（通过 action-xhr 属性）的提交才支持 POST 请求。

通过一些研究，我了解到 AMP 表单需要该action-xhr属性。将我的表单action属性更改为action-xhr导致此错误：

响应中“Access-Control-Allow-Credentials”标头的值为“”，当请求的凭据模式为“包含”时，该值必须为“真”。

有没有办法可以将表单添加到使用 AMP 的网站，以便表单向第三方 URL 提交 POST 请求？最好 AMP 根本不会干扰。

4

2 回答 2

0

这是我用来向 3rd 方服务 (JotForm) 提交 AMP 表单的 PHP 脚本：

<?php 

    if (!empty($_POST)) {
      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");
      // change to represent your site's protocol, either http or https
      header("amp-access-control-allow-source-origin:https://".$_SERVER['HTTP_HOST']);
      header("Content-Type: application/json");
      $firstName = isset($_POST['first_name']) ? $_POST['first_name'] : '';
      $lastName = isset($_POST['last_name']) ? $_POST['last_name'] : '';
      $phone = isset($_POST['your_phone_number']) ? $_POST['your_phone_number'] : '';
      $email = isset($_POST['your_email']) ? $_POST['your_email'] : '';
      $city = isset($_POST['driver_app_request_call_hiring_city']) ? $_POST['driver_app_request_call_hiring_city'] : '';

      try {
        include "JotForm.php";
        $jotformAPI = new JotForm("APIkey");
        $submission = array(
            "3" => $firstName,
            "4" => $lastName,
            "5" => $phone,
            "6" => $email,
            "7" => $city
        );
        $result = $jotformAPI->createFormSubmission("formId", $submission);
        $output = ['message' => "Your application was submitted. Thank you!"];
        header("Content-Type: application/json");
        echo json_encode($output);

      } catch (Exception $e) {
        var_dump($e->getMessage());
      }
  }
?>

对我们来说效果很好！

于 2018-02-01T19:26:41.640 回答
0

您可以通过将onclick="submit()"添加到提交按钮来手动提交表单。这将允许您通过POST请求的action方法提交amp-form 。

例子：

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

<form method="POST" action="url/">
    <label>Name</label>
    <input type="text" name="name">
    <button type="submit" onclick="submit()" Submit</button>
</form>
于 2021-01-28T01:23:17.477 回答