Почему не отправляется POST запрос с помощью XMLHttpRequest?

Question

[Jake Taylor]

Тестирую локально на 127.0.0.1:3000.

Имеется скрипт, получающий значение поля input по событию onkeyup и с помощью XMLHttpRequest значение отправляется со стороны клиента на сторону сервера NodeJS:

<script>
    function search() {
        let method = 'POST';
        let url = new URL("/");

        let searchValue = document.getElementById('search').value;
        console.log('[' + url.href + '] searchValue:' + searchValue);

        let searchRequest = new XMLHttpRequest();
        searchRequest.open(method, url);
        searchRequest.send({searchQuery: searchValue});
    }
</script>

Согласно скрипту, POST запрос отправляется на корневой адрес let url = new URL("/");, который обрабатывается на сервере таким образом:

const express = require('express');
const bodyParser = require('body-parser');

const urlencodedParser = bodyParser.urlencoded({ extended: false});
const jsonParser = bodyParser.json();

app.use(jsonParser);
app.use(urlencodedParser);

// some code ....

exports.index = function (request, response) {
    let giftCertificates;
    let searchValueFromPage = JSON.stringify(request.body.searchQuery);

    // if the user entered search request, then the event "onkeyup" will run
    if(searchValueFromPage) {
        giftCertificates = search(searchValueFromPage, content);
    } else {
        giftCertificates = content;
    }

    response.render('index.hbs', {
        title: 'Gifts main page',
        text: 'This is the left box',
        gifts: giftCertificates
    });
}

Но в консоли получается ошибка:

Uncaught TypeError: URL constructor: / is not a valid URL.

Если вместо let url = new URL("/"); я пропишу let url = new URL(window.location.href);, что будет равно http://127.0.0.1:3000/, то после ввода мной значение в input, запрос не попадает на сервер по пути http://127.0.0.1:3000/, почему?

Answer 1

[Jake Taylor]

Разобрался, у меня на сервере была настроена обработка только GET запроса, добавил и для POST:

indexRouter.get('/', indexController.index);
indexRouter.post('/', indexController.index);

Answer 2

[WapSter]

let url = new URL(window.location.href);, что будет равно 127.0.0.1:3000

неверно

let url = new URL('http://' + window.location.host)

И даже это не равно строке с адресом. Вообще зачем ты используешь new Url, когда от тебя ожидается всего навсего строка с url в твооем случае это просто 'http://' + window.location.host

Comments

[Jake Taylor]

всё равно я не попадаю в функцию:
exports.index = function (request, response) {...}
Данная функция выполняется при обращении к 127.0.0.1:3000, когда руками в строке запроса набираю адрес.
Она не выполняется, когда срабатывает событие onkeyup.

Почему при использовании синтаксиса:
searchRequest.send({searchQuery: searchValue});
Я получаю педупреждение:

Argument type {searchQuery: any} is not assignable to parameter type Document | XMLHttpRequestBodyInit | null | undefined

[WapSter]

Jake Taylor, и что по твоему должно произойти по событию? Точнее что должна сделать твоя функция в express? И чтобы дальше не продолжать эту бессмысленную дискуссию с твоей кашей в голове, посмотри в devtools во вкладке network, что куда отправляется и что тебе возвращается

[Jake Taylor]

WapSter,

searchRequest.onreadystatechange = function() {
            console.log(this.readyState)
            console.log(this.status)
};

В ответ я получаю 404 ошибку. Как это 127.0.0.1:3000 не может быть найден?!

Точнее что должна сделать твоя функция в express?

let searchValueFromPage = JSON.stringify(request.body.searchQuery);

Мне надо получить значение переменной searchQuery, которая должна находиться в request.body, потому что POST запрос выполняется: