При отправке данных через axios.post на php-файл и открытии этого php-файла через кнопку формы html массив $_POST пустой?

Question

[alex4825]

Есть файл index.php с html-кодом, в котором форма с некоторыми input-ми:

<div id="vueArea" class="body">
<form @submit="onSubmit" method="POST" action="/files/server.php">
<!--Какая-то html-вёрска c input-ми и {{vue-переменными}}-->
<button type="submit" class="button"'>Получить результат</button>
</form>
</div>
<script src="/files/script.js"></script>

Далее файл /files/script.js с функцией onSubmit, которая срабатывает при нажатии на кнопку:

new Vue({
    el: '#vueArea',
methods: {
        async onSubmit() {
            let formData = new FormData();
            formData.append("name", "value");
            await  axios.post("/files/server.php", formData)
.then((response) => {
                console.log('SUCCESS!!');
                console.log(response.data);
            })
                .catch(function () {
                    console.log('FAILURE!!');
                })
})

И файл /files/server.php, на котором я пытаюсь обратиться к массиву $_POST:

<?php

declare(strict_types=1);

var_dump($_POST);

?>

Запускаю приложение на localhost:8080
При нажатии на кнопку открывается страница файла /files/server.php, где var_dump($_POST); выводит массив только с теми данными, которые есть в форме в тегах input, а переменных из js файла ("name" => "value" в данном случае) в нём нет. В исходном коде страницы, в консоли выводится сообщение FAILURE!!, то есть, срабатывает блок catch.
Если к событию onSubmit добавить модификатор prevent (), запретив этим перезагрузку страницы (файл /files/server.php не открывается, остаёмся на index.php), то в исходном коде, в консоли выводится сообщение SUCCESS!! и
массив axios.post запроса, то есть данные из него отправлены.

Перепробовал всё, что только можно. Отправлял данные и в JSON формате:

axios.post("/files/server.php",
                {
                    data: {
                        "name": "value"
                    },
                    headers: {'content-type': 'application/x-www-form-urlencoded'},
                })
                .then( (response) => {
                    console.log('SUCCESS!!');
                    console.log(response.data);
                })
                .catch(function () {
                    console.log('FAILURE!!');
                })

Принимая их в /files/server.php из php://input так:

try {
   $data = json_decode(file_get_contents('php://input'), true, 512, JSON_THROW_ON_ERROR);
} catch (JsonException $e) {
    echo $e;
}

var_dump(file_get_contents('php://input'));

Здесь json_decode выбрасывает исключение, кстати:
JsonException: Syntax error in C:\Users\"имя пк"\Desktop\Work\repo\task_calculator\files\server.php:10
Stack trace:
#0 C:\Users\"имя пк"\Desktop\Work\repo\task_calculator\files\server.php(10): json_decode()
А var_dump($data); выводит NULL
Но в файле php://input всё те же данные из form html при открытии /files/server.php, что и раньше, данных axios нет, в консоли FAILTURE!!. Аналогично первому примеру с модификатором .prevent, в консоли выведет SUCCESS!! и нужный массив(только в формате JSON), отправленный через axios.post.
Резюмирую: нужно при нажатии кнопки перейти на страницу /files/server.php, в котором получить доступ к данным из axios.post, данные из form html в принципе не нужны
Уже почти неделю пытаюсь это решить, всё перепробовал. Помогите пожалуйста!

Answer 1

[Yuriy Vasilchenko]

У вас данные отправляет форма и vue-приложение.
Форма отправляет успешно и поэтому видите результат в POST.
Чтобы проверять только vue:
- Уберите у формы action

* Можете заменить @submit="onSubmit" на @submit.prevent="onSubmit" это позволит не перезагружать страницу после клика по кнопке.

Лучше поэтапно проверьте что:
- Пришло с формы во Vue
- Vue отправил
- Пришло в server.php
- Пришло в ответе

Comments

[alex4825]

Дело в том, что при @submit.prevent="onSubmit" данные из Vue отправились, от server.php пришёл ответ, в консоли его можно увидеть, это всё без перезагрузки страницы, без перехода на вторую страницу (server.php). Но мне как раз нужно на неё перейти (без .prevent) и там обратиться к массиву $_POST с данными от Vue. Но при переходе server.php и выводе массива $_POST в нём нет этих данных.

Если убрать из формы action, то перехода на страницу server.php вообще нет, и я не знаю, как его правильно описать в таком случае(

[Александр]

Вы в php дампите ответ сразу в браузер, а это не совсем то. Если вам инетерсно получать что-то более вменяемое в вашем axios в целях отладки, можное сделать так:

$input = file_get_contents('php://input');
$response = [];
ob_start(); // включаем буферизацию
$str  = "php://input:\n";
var_dump($input);
$str .= "\$_POST:\n";
var_dump($_POST);
$buffer = ob_get_contents(); // забираем из буфера
ob_clean() // отключаем буферизацию

$response['dump'] = $buffer;
echo json_encode($response); // отдаем ответ axios

Так вы хотя бы лучше поймете, что происходит с вашими запросами.

[alex4825]

progribof, ситуация аналогичная и в таком случае. Если в form указать action, то произойдёт переход и отправится post от формы (не от axios) и в консоли выведет FAILTURE!!. Только без action и с @submit.prevent в консоли можно увидеть нужный массив(в response пришёл правильный ответ от server.php). Просто мучение какое-то, не понимаю, что происходит

[Александр]

alex4825, консоль выводит FAILTURE, а этого мало. У вас нет информации, что именно происходит не так.
Попробуйте такой вариант:

this.axios.post("/files/server.php",
  {
    data: {
        "name": "value"
    }
  })
  .then(
    response => {
      console.log('SUCCESS!!');
      console.log(response.data);
    },
    error => {
      console.log(error)
    }
  ).catch(console.log.bind(console));

[alex4825]

progribof, console.log(error) выводит следующее:
Object { message: "Request aborted", name: "AxiosError", code: "ECONNABORTED", config: {…}, request: XMLHttpRequest, stack: "" }

[Александр]

alex4825, бросьте перфекционировать. Напишите код максимально просто, по достаточному минимуму. Не пытайтесь сразу же все сделать оптимизированным и строго правильным. Например, я не знаю, зачем вам на старте такие усложения:

json_decode(file_get_contents('php://input'), true, 512, JSON_THROW_ON_ERROR)

... но предполагаю, что вы могли таким стремлением загнать свою работу в тупик. Лучше было бы отдельно обрабатывать file_get_contents('php://input') и уже потом подавать на вход функции json_decode. Вы отлавливает в блоке catch ошибку json_decode и тут же кидаете ее в браузер (echo $e) . А вы уверены, что ваш скрипт в браузере поймет то, что оттуда вылетит?

Сформируйте массив, например $response и складывайте в него все, что захотите. Ошибки, данные, планы по захвату мира. Не кидайте ничего зазря в браузер, который надеется с помощью ajax получить что-то понятное, а не внезапные ошибки сценариев сервера. Если браузер ждет json, вам надо отдавать ему именно json. Иначе axios упадет в обморок.
Последней строчкой, сделайте просто
echo json_encode( $response );
и это должно быть единственное echo.

Если ваш php будет громко недоволен, это будет сбивать с толку axios. Если надо, используйте буферизацию (пример в комментах выше), чтобы записать все ругательства и в виде строки положить в ответ для axios