Как отправить POST запрос с Vue.js на PHP?

Question

[m1stik]

Здравствуйте. Помогите, пожалуйста, разобраться, почему я не могу отправить POST-запрос через Vue.js, или не могу правильно его принять через PHP.
Вот коды Vue.js. Отправление:

let tests = {
    cat1: {
        name: 'Авторизация',
        items: {
            authorize1: {
                name: 'Авторизация',
                subname: '',
                request: {
                    method: 'POST',
                    link: 'auth',
                    data: {
                        login: 'admin',
                        password: 'password'
                    }
                },
                test: (result, status) => {
                    if (status.status !== 404 && status.status != 403 && status.status != 500) {
                        return true;
                    }

                    return false;
                }
            }}}}

Метод:

let f = (method, link, data, cb) => {
    let options = {
        method: method,
        headers: new Headers()
    };

    if(data instanceof FormData) {
        options.body = data;
    } else if(data) {
        let fd = new FormData();
        for(let key in data) fd.append(key, data[key]);
        options.body = fd;
    }
    if(vue.bearerEnabled)
        options.headers.append('Authorization', 'Bearer ' + vue.bearer);

    let status = false;
    fetch(link, options)
        .then(r => {
            if(r.status == 404) {
                cb(null, r);
            }

            status = r;
            return r.json();
        }).then(r => {
            cb(r, status);
        });
};
let vue;

window.onload = _ => {
    vue = new Vue({
        el: '#app',
        data: {
            url: 'http://wsr.cc:898/osnov1/api/',
            isStart: false,
            tests: [],
            bearer: '',
            bearerEnabled: false
        },

        methods: {
            appStart() {
                if (this.url !== '') {
                    this.isStart = true;
                    let newTests = {};

                    for(cat in tests) {
                        newTests[cat] = {};
                        newTests[cat].name = tests[cat].name;
                        newTests[cat].items = {};

                        for(id in tests[cat].items) {
                            newTests[cat].items[id] = tests[cat].items[id];
                            newTests[cat].items[id].sended = false;
                            newTests[cat].items[id].status = null;
                            newTests[cat].items[id].response = {
                                statusCode: null,
                                statusText: null,
                                body: null
                            };

                            newTests[cat].items[id].ok = false;
                        }
                    }

                    this.tests = newTests
                }
            },

            test(cat, id) {
                let item = this.tests[cat].items[id];
                let data = item.custom ? new FormData(document.querySelector('[data-form=' + cat + '_' + id + ']')) : item.request.data;
                let url = this.url + item.request.link;

                if(item.request.customLink) {
                    for(let key in item.request.customLink) {
                        url = url.replace('{' + key + '}', document.querySelector('[data-value="' + cat + '_' + id + '_' + key + '"]').value);
                    }
                }

                f(item.request.method, url, data, (result, status) => {
                    this.tests[cat].items[id].status = item.test(result, status);

                    this.tests[cat].items[id].sended = true;
                    this.tests[cat].items[id].originalUrl = url;
                    this.tests[cat].items[id].response.statusCode = status.status;
                    this.tests[cat].items[id].response.statusText = status.statusText;

                    this.tests[cat].items[id].response.body = JSON.stringify(result, null, 4);
                });
            },

        }
    });
};

В самом PHP в POST ничего нет, "file_get_contents('php://input')" так же не помогает, там пусто.

Comments

[Александр]

А в каком месте, по вашему мнению, отправляется POST запрос? И, забегая вперед, не нарушается ли same domain policy?

[Nurbol Suleimenov]

Согласен с Александр, не строчки кода работы с AJAX. Приведите полный код, как попросил Viktor_Dav или напишите что используете для работы с сервером

[m1stik]

Nurbol Suleimenov, привёл полный код. Сервер работает на Apache

[m1stik]

Александр, по моему здесь:

request: {
                    method: 'POST',
                    link: 'auth',
                    data: {
                        login: 'admin',
                        password: 'password'
                    }

[Nurbol Suleimenov]

m1stik, с такой степенью запутаности кода, мало кто захочет разбираться с ней. Проведите отладку посредством интрументов разработчика встроенное в браузер: через вкладку сеть можно увидеть происходит ли отправка POST запроса, и если да, то каков ответ.
Или можно использовать итеративный подход. Очистите весь код и напишите простой запрос на PHP бекенд. Проверьте работу. Затем добавляйте логику и функциональность небольшими частями, после каждого шага проверяя результат. Так Вы сузите область происхождения ошибок, и легко поймете в чем дело

[Nurbol Suleimenov]

Не обижайтесь про комментарии про запутаность кода. Просто у Ваш код не разделен на абстракции и структура данных не чистая (genetic имена, не понятные сокращения, ...). Прочитайте книгу Мартина про чистый код, паттерны для языка JS и т.д.

[Александр]

m1stik, посмотрите в консоли, куда отправляется запрос. Есть предположение, что мимо.

[m1stik]

Александр Nurbol Suleimenov Большое спасибо, нашёл ошибку в пути. Он отправлял на api/auth, а нужно было на api/auth/
Странно, конечно, я думал, что он папку и так подхватит :)

Answer 1

[Konstantin Malyarov]

Ajax, Axios, Vue resource - вот то что отправляет post запросы.

Comments

[Viktor_Dav]

Он использует fetch, как я понял.
Код очень своеобразный.

Answer 2

[Alex_Zdorgor]

Использовать ajax запрос из любой библиотеки или чистого js. Но для Vue чаще всего используют библиотеку Axios.
https://ru.vuejs.org/v2/cookbook/using-axios-to-co...

Answer 3

[Viktor_Dav]

Не совсем понятно, что это такое. Вы не могли бы привести полный код?

Comments

[m1stik]

Это инструмент проверки запросов API. Привёл полный код