来自express js的Ajax post响应不断抛出错误

I am having a real hard time standing up bidirectional data transfer from a html page to my node.js application and then back to the html page.

我真的很难站起来从html页面到我的节点进行双向数据传输。然后返回到html页面。

I'm pretty sure I'm all over the correct solution, but I'm just not getting it to work.

我很确定我已经找到了正确的解决方案，但我就是没能让它发挥作用。

I'm using the following for my node.js application:

我对我的节点使用以下代码。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");  });

The following is my html page:

以下是我的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>

So, when I run the node application, the server comes up just fine. When I fire up the html page, I get the alert "Got here!" When I press the button "NameGameIt", I get the alert "How about now?" followed by the alert "Name: " + whatever name I entered. Once I click off that alert, the node application immediately sees the post and prints out the name to the console. Two seconds later when the node sends the response, the browser will go right into the error handler on the ajax post. The only useful data to come out in the error handler is that it is an "error" which isn't really useful.

因此，当我运行节点应用程序时，服务器运行良好。当我启动html页面时，我得到警告“到达这里!”当我按下“NameGameIt”按钮时，我会得到“现在怎么样?”一旦我单击该警报，节点应用程序将立即看到该post并将名称打印到控制台。两秒钟后，当节点发送响应时，浏览器将直接进入ajax post上的错误处理程序。错误处理程序中唯一有用的数据是，它是一个“错误”，并不是真正有用的。

So I know the message is getting to the node from the html page because it prints out the name that I sent and I know the html page is getting the message back from the node because it won't error out until the timeout on the node happens triggering the send. But, I have no idea why it keeps on sending me to the error handler instead of the success. I've stepped through all the way in the node code using node-inspector and it seems to be building the packet correctly with a 200 code for success and it calls .end inside .send after it's done making the packet so I don't think either of those things are biting me.

所以我知道消息的节点从html页面,因为它打印出这个名字,我发送我知道html页面得到消息的节点,因为它不会错误,直到超时的节点上发生的触发发送。但是，我不知道为什么它一直将我发送到错误处理程序而不是成功。我已经用node-inspector在节点代码中遍历了所有的步骤，它似乎用200个成功的代码构建了数据包，它调用。end in .send在包完成后发送，所以我认为这两件事都不会让我生气。

I'm about to go nuts! If anyone sees what I'm missing or has any new ideas on ways to gather more information, I would be very grateful for the help.

我要发疯了!如果有人看到我遗漏了什么，或者对如何收集更多信息有新的想法，我会非常感谢你们的帮助。

2 个解决方案

#1

Your code is perfectly fine, but you're almost certainly running into a cross-domain AJAX request issue. You might be opening this HTML file on the local filesystem and making requests that way, which is what is causing this problem.

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

To fix it, add app.use(express.static('public')); like so:

要修复它，添加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");  });

and then place your html file in the 'public' folder. Once you launch your server, you can visit http://127.0.0.1:8088/file.html and your code will run fine.

然后将html文件放在“public”文件夹中。启动服务器后，可以访问http://127.0.0.1:8088/file。html和您的代码将运行良好。

#2

In my case adding this to the app.js works.

在我的例子中，将这个添加到app.js可以工作。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

https://enable-cors.org/server_expressjs.html

#1