Question

我正在尝试在服务器和客户端之间传递json对象。服务器端到目前为止看起来像：

var express = require('express'); // Express web server framework
var request = require('request'); // "Request" library
var querystring = require('querystring');
var cookieParser = require('cookie-parser');
var bodyParser = require("body-parser");


var app = express();
app.use(express.static("public"));

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.post("/", function (req, res) {

    console.log('Request received');
    var return_value;

    req.on('data', function (chunk) {
        console.log('GOT DATA!');
        json = JSON.parse(chunk);
        json.access_date  =  "12.04.17";
        return_value = JSON.stringify(chunk);
    });

    res.writeHead(200, { 
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*' 
    });
    res.json(return_value);

})


var server = app.listen("8080")
console.log('Server running port 8080/');

将以下功能附加到按钮上。

<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click", passArg);

function passArg() {
    console.log("I'm here")
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.open("POST", "/", true);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
                //var json = JSON.parse(xmlhttp.responseText);
                console.log("Data passed back: " + xmlhttp.responseText)
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    }

    var data = JSON.stringify({"email":"hey@mail.com","password":"101010"});
    xmlhttp.send(data);
}
</script>

现在单击控制台日志“我在这里”触发正常，但该函数在代码的POST部分返回404错误。我也不完全了解如何从服务器将数据传回客户端。方法res.end()是否是正确的方法？

编辑：我编辑了脚本以反映答案。

Answer 1

问题是您的服务器正在接收发布请求，但您的路由是获取请求。

变化：

app.get("/callback", function(req, res){

要：

app.post("/callback", function(req, res){

Answer 2

在浏览器开发工具网络中检查实际请求。可能会看到请求是'http://localhost:8080/localhost:8080 ...将协议添加到使用的网址

xmlhttp.open("POST", "http://localhost:8080")

或者只是将其设置为：

xmlhttp.open("POST", "/")

添加post路由服务器端

Answer 3

我认为需要做出2次改变

<强> 1

正如@charietfl所提到的，您可以通过仅包含express端点的路径来简化/callback来电。

您目前无法呼叫xhtmlhttp.open()端点，因此我会将其放入xmlhttp.open('POST', '/callback')来电。

像GET

这样的东西

<强> 2

正如@Bshaps所提到的，您还有一个期望POST请求的端点，但您正在使用app.get("/callback"...来改变

app.post("/callback"...

到

{{1}}

eventListener on按钮，用于在HTML客户端和node.js服务器之间交换数据

3 个答案: