Как исправить ошибку при подключении динамической формы на Турбо страницах Яндекс?

Question

[Алексей Эвлайт]

Всем заглянувшим, спасибо за внимание!
Подключаю динамическую форму на турбо странице с 1 полем (телефон), но выдает ошибку "Нет подключения к интернету"

<form data-type="dynamic-form" end_point="https://sitename.ru/includes/form-yandex.php">
				          <div type="input-block">
				              <span type="input" name="LEAD_PHONE" label="Телефон" input-type="text" placeholder="8-ХХХ-ХХХ-ХХ-ХХ" required="true"></span>
				              <button type="submit" text="ПОЛУЧИТЬ ПРЕДЛОЖЕНИЕ"></button>
				          </div>
				          <div type="result-block">
				              <span type="text" field="description"></span>
				          </div>
				      </form>

Скрин из отладки веб-мастера, но такая же ошибка, когда с мобилки пробую.
Прокси не юзаю.
С чем может быть связано?

Comments

[m4son]

Алексей, решили вопрос ? У меня сейчас такая же проблема

Answer 1

[galower]

Пока никак! Так как turbo версия Вашего сайта открывается по адресу https://yandex.ru/turbo?text=Ваш_сайт,
а форму Вы хотите отправить на https://Ваш_сайт, то браузер согласно CORS политике на странице https://yandex.ru/turbo просто не дает сделать кросс-доменный запрос. Явный косяк Яндекса.

Answer 2

[SergeyRe]

Все работает-главное правильно настроить сервер обработки формы. Пример на php есть у Яндекса. Домен должен совпадать с доменом сайта.

Привожу пример на ноде

import Cors from "cors";
import initMiddleware from "../../lib/init-middleware";

const cors = initMiddleware(
  // You can read more about the available options here: https://github.com/expressjs/cors#configuration-options
  Cors({
    methods: ["POST", "OPTIONS"],
    origin: [
      /^(https:\/\/(?:.*\.)?yandex\.(?:ru|by|uz|com|com\.tr))$/,
      /^(https:\/\/(?:.*\.)?turbopages.org)$/
    ],
    credentials: true,
  })
);
export default async function handler(req, res) {
  await cors(req, res);
//остальная логика 
  res.json([
    {
      field: "description",
      value:
        "Спасибо за подписку .Мы сообщим , как только так сразу",
    },
    {
      field: "link",
      value: "На главную",
      href: "https://batteryhelp.ru",
    },
  ]);
}

Работающий пример

Answer 3

[m4son]

Я нашел решение.
Вот код формы (пример с сайта яндекс турбо https://yandex.ru/dev/turbo/doc/rss/elements/dynam...)

<form data-type="dynamic-form" end_point="http://exmaple.com/post-form.php">
    <div type="input-block">
        <span type="input" name="fio" label="Имя" input-type="text" placeholder="Иван Иванов" required="true"></span>
        <span type="input" name="phone" label="Телефон" input-type="text" placeholder="8-ХХХ-ХХХ-ХХ-ХХ" required="true"></span>
        <span type="radio" name="delivery" label="Выбор способа доставки">
            <span
                type="option"
                value="pickup"
                checked="true"
                label="Самовывоз, Бесплатно"
                meta="Сегодня">
            </span>
            <span
                type="option"
                value="courier1"
                checked="false"
                label="Курьером, 500₽"
                meta="1 день, Внутри МКАД">
            </span>
            <span
                type="option"
                value="courier2"
                checked="false"
                label="Курьером, 1500₽"
                meta="Сегодня, Снаружи МКАД">
            </span>
        </span>
        <span type="checkbox" name="sms" value="on" content="СМС оповещение о заказе"></span>
        <span type="textarea" name="comment" label="Комментарий" placeholder="Комментарий к заказу" required="false"></span>
        <button type="submit" text="Оформить заказ"></button>
    </div>
    <div type="result-block">
        <span type="text" field="description"></span>
        <span type="link" field="link"></span>
    </div>
</form>

А вот код php для отправки письма

<?php

/**
 * Определение возможности доступа к API.
 */
function turbo_get_allow_origin()
{
  $http_origin = $_SERVER['HTTP_ORIGIN'];
  if (preg_match('/^(https:\/\/(?:.*\.)?yandex\.(?:ru|by|uz|com|com\.tr))$/', $http_origin, $matches)) {
    return $matches[0];
  } else if (preg_match('/^(https:\/\/(?:.*\.)?turbopages.org)$/', $http_origin, $matches)) {
    return $matches[0];
  }
  return null;
}

$http_allow_origin = turbo_get_allow_origin();
if (is_null($http_allow_origin)) {
  // Если доступа нет, должен вернуться код ответа 403.
  http_response_code(403);
  exit('Access denied');
}
// Отправка CORS-заголовков.
header("Access-Control-Allow-Origin: " . $http_allow_origin);
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Origin, Content-Type, Content-Length, Accept-Encoding");
// Отправка заголовка о том, что данные возвращаются в формате JSON.
header("Content-Type: application/json;charset=utf-8");

// end code yandex form 

// if POST request
if ($_SERVER["REQUEST_METHOD"] == "POST") {

  $mailTo = "[e-mail]";  // mail to
  $mailFrom = "[e-mail]";  // mail from

  $data_json = file_get_contents("php://input");
  $data = json_decode($data_json, true);

  // form varibles
  $fio = htmlspecialchars($data['fio']);
  $phone = htmlspecialchars($data["phone"]);
  $delivery = htmlspecialchars($data["delivery"]);
  $sms = htmlspecialchars($data["sms"]);
  $comment = htmlspecialchars($data["comment"]);

  // mail subject text
  $subjectText = "Заказ с сайта example.com";
  $subject = "=?utf-8?b?" . base64_encode($subjectText) . "?=";

  // mail header text
  $header = "Content-Type: text/plain; charset=utf-8\n";
  $header .= "From: Заказ <" . $mailFrom . ">\n\n";

  $message = "\n\nИмя: " . $fio . "\n\nТелефон: " . $phone . "\n\nДоставка: " . $delivery . "\n\nСообщение: " . $sms . "\n\nКоментарий: " . $comment;

  $mail = mail($mailTo, $subject, $message, $header);

  // output in yandex form
  if ($mail) {
    echo '[
    {
       "field": "description",
       "value": "Заказ успешно оформлен. Ваш номер заказа:"
    },
    {
       "field": "link",
       "value": "123456",
       "href": "https://example.com/cabinet/order/123456/"
    }
]';
  }
}