Question

当我单击“提交”按钮时，我无法获得节点的回应并无法表达。我对节点表达很陌生。这是我尝试过的。您能告诉我代码有什么问题吗？请指导我如何在当前html框中获取即时响应，或者还有什么其他方法来获取响应而不是异步函数？

reference

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);
});

然后，您必须更改用fetch()调用的URI，以便它到达您在app.get()中上面指定的端点（即'/ headers'）。我在端口3000上使用localhost。

$("#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);
});

最后，我对您的项目设置了解不多，但是这是我通过使用express提供的index.html文件来做到的

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

并将index.html放置在快速应用程序根目录下名为/public的目录中。文件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>

我只包含最后一部分，因为再次，我看不到您如何设置项目-但这对我有用。

单击提交按钮后，如何通过快速节点在当前窗口的框中获得结果？

1 个答案: