Пустой массив `POST` в `php` при запросе `axios.post`

463

16 июля 2017, 12:40

Возникла проблема при POST запросе с помощью библиотеки axios.

Вот сам POST запрос:

axios({
    method: 'post',
    url: 'ajax.php',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function(response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Это код файла ajax.php.

<?php
    echo json_encode($_POST);
?>

А результат запроса пустой массив data: Array(0).

Документация с примерами здесь.

В чем моя ошибка?

Answer 1

Принимайте данные из потока php://input так как от клиента идет не массив переменных, а строка в json формате.

Пример:

$_POST = json_decode(file_get_contents('php://input'), true);

и дальше работаете как обычно с массивом $_POST

Answer 2

@Visman правильно сказал про то что axios отправляет данные с заголовком header('Content-Type: application/json'); потому и данные не попадали в POST.

И я нашел два решения для POST запроса с помощью axios. Что бы отправлять на сервер данные нужного формата и с нужными заголовками.

Вот первый способ:

axios({
    method: 'post',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    url: 'ajax.php',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function(response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Надо было явно задать параметр headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

А это второй способ с применением URLSearchParams:

var params = new URLSearchParams();
params.append('firstName', 'Fred');
params.append('lastName', 'Flintstone');
axios({
    method: 'post',
    url: 'ajax.php',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function(response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

А здесь с помощью URLSearchParams создаем объект данных что бы отправить их в формате application/x-www-form-urlencoded а не JSON․

Примечание: URLSearchParams не поддерживается всеми браузерами. Поддержку броузеров URLSearchParams можете смотреть здесь.