Express JS的Ajax发布响应不断抛出错误

小编典典

Express JS的Ajax发布响应不断抛出错误

ajax

我真的很难站起来从html页面到我的node.js应用程序然后再回到html页面的双向数据传输。

我很确定我已经找到了正确的解决方案，但是我只是没有使它起作用。

我在node.js应用程序中使用了以下内容：

var express = require('/usr/lib/node_modules/express');
var app = express();

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.send(500, 'Something broke!');
});

app.use(express.bodyParser());

app.post('/namegame', function(req, res)
    {
        console.log('Got request name: ' + req.body.name);
        setTimeout(function() 
        { 
            var newName = "New Name-O";
            res.send({name: newName});
        }, 2000);
    }
);

app.listen(8088, function() { console.log("Server is up and running");  });

以下是我的html页面：

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() 
        {
            alert("Got here!");

            function DisplayName(response)
            {
                alert(response.newName);
            }

            $("#NameGameIt").click(function(event)
            {
                alert("How about now?");
                //event.PreventDefault();
                var nameSubmitted = document.getElementById("name");
                //var nameSubmitted = "help!!";

                alert("Name: " + nameSubmitted.value);

                $.ajax({
                    type:       "POST",
                    url:        "http://127.0.0.1:8088/namegame",
                    data:       {name: nameSubmitted.value},
                    dataType:   "json",
                    timeout:    2500,
                    success:    function() { alert("???");},
                    error:      function(error1, error2, error3)
                    {   alert("error"); },
                    complete:   function(arg1, arg2, arg3)
                    {   alert("complete");  }
                });

            });

        });

    </script>

</head> 
<body>

<h1>Test form for Ajax</h1>
</br>

Name: <input type="text" id="name" name="name"></br>
<input type="button" value="NameGameIt" id="NameGameIt">
</form>

</body>
</html>

因此，当我运行节点应用程序时，服务器运行正常。当我启动html页面时，收到警报“在这里！”。当我按下按钮“
NameGameIt”时，我收到警报“现在怎么样？” 然后是警报“名称：”
+输入的任何名称。当我单击该警报后，节点应用程序将立即看到该帖子并将其名称打印到控制台。两秒后，当节点发送响应时，浏览器将直接进入ajax帖子中的错误处理程序。在错误处理程序中唯一有用的数据是它是“错误”，实际上并没有什么用。

所以我知道消息正在从html页面到达节点，因为它打印出我发送的名称，并且我知道html页面正在从节点返回消息，因为直到节点上的超时它都不会出错发生触发发送。但是，我不知道为什么它继续将我发送到错误处理程序而不是成功。我已经使用node-
inspector逐步完成了节点代码，似乎成功地使用200代码成功构建了数据包，并在完成数据包处理后在.send内调用.end，所以我不认为其中任何一件事都在咬我。

我快疯了！如果有人看到我的缺失或对收集更多信息的方式有任何新的想法，我将非常感谢您的帮助。

阅读 226

2020-07-26

共1个答案

小编典典

您的代码非常好，但是几乎可以肯定，您会遇到跨域AJAX请求的问题。您可能正在本地文件系统上打开此HTML文件并以这种方式发出请求，这就是导致此问题的原因。

要修复它，添加app.use(express.static('public'));如下：

var express = require('/usr/lib/node_modules/express');
var app = express();

app.use(function(err, req, res, next){
  console.error(err.stack);
  res.send(500, 'Something broke!');
});

app.use(express.bodyParser());
app.use(express.static('public'));

app.post('/namegame', function(req, res)
    {
        console.log('Got request name: ' + req.body.name);
        setTimeout(function() 
        { 
            var newName = "New Name-O";
            res.send({name: newName});
        }, 2000);
    }
);

app.listen(8088, function() { console.log("Server is up and running");  });

然后将您的html文件放在“公共”文件夹中。启动服务器后，您可以访问http://127.0.0.1:8088/file.html并且代码可以正常运行。

2020-07-26