Как получить результат в поле в текущем окне через экспресс-узел после нажатия на кнопку отправки?

Question

Я не могу получить ответ с узлом и выразить, когда я нажимаю кнопку отправки. Я довольно плохо знаком с узлом и выражаю. Вот что я попробовал. Можете ли вы сказать мне, что не так с моим кодом? Пожалуйста, объясните мне, как получить мгновенный ответ в окне текущего html или как можно получить ответ вместо асинхронной функции?

<p class="borderBox"></p>

Answer 1

Трудно сказать, не видя весь ваш код.Но я думаю, что первая проблема в том, что вы недостаточно тщательно проверяете свои req.headers kvps.Некоторые заголовки не всегда присутствуют в запросе, поэтому вам нужно будет указать случай, когда они не поступят ожидаемым образом

     if (req['x-forwarded-for']) {
         var ip = req['x-forwarded-for'].split(',')

или

     req['x-forwarded-for'] = req['x-forwarded-for'] || ''

ОБНОВЛЕНИЕ

Судя по предоставленному вами коду, сначала внесите следующие изменения в ваш код server.js:

app.get('/headers', function(req, res) {
    if (req.headers['x-forwarded-for'])
        var ip = req.headers["x-forwarded-for"].split(',')[0];
    if (req.headers['accept-language'])
        var lang  = req.headers['accept-language'].split(',')
    if (req.headers['user-agent'])
        var sys = req.headers['user-agent'].match(/\((.+?)\)/)[1]


    var obj = {
        "IP Address": ip,
        "Language" : lang,
        "Operating System": sys
    }

    // res.json(obj);
    res.set('Content-Type', 'application/json');
    res.status(200).send(obj);
});

Затем необходимо внести изменения в URIВы звоните с fetch(), чтобы он достиг конечной точки, указанной вами выше в app.get() (то есть «/ headers»).Я использую localhost на порту 3000.

$("#submit").submit(async function(event) {
    event.preventDefault();
    // const response = await fetch(window.location.href);
    const response = await fetch('http://localhost:3000/headers');
    const data = await response.json();
    document.getElementsByClassName('borderBox')[0].innerText = JSON.stringify(data);
});

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

app.use(express.static(path.join(__dirname, 'public')));

и размещение index.html в каталоге с именем /public в корневом каталоге приложения Express.Файл index.html находится ниже:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<p>
    Please click to get the IP address, language, and operating system for your 
device.
</p>

<form id="submit">
    <button type="submit">Submit</button>
</form>


<p class="borderBox">    </p>

<script>
    $("#submit").submit(async function(event) {
        event.preventDefault();
        // const response = await fetch(window.location.href);
        const response = await fetch('http://localhost:3000/headers');
        const data = await response.json();
        document.getElementsByClassName('borderBox')[0].innerText = JSON.stringify(data);
    });
</script>

Я просто включаю эту последнюю часть, потому что, опять же, я не вижу, как вы настроили свой проект - но это сработало для меня.