javascript - 发布请求正文为空 - XMLHttpRequest 到 Express 服务器

Question

我正在尝试从使用 XMLHttpRequest 发送到快速服务器的发布请求中访问正文。然而，请求的正文是空的，我似乎无法理解为什么会这样。

我在 express 应用程序中包含了一个正文解析器，并且我试图从 SO 答案中复制一些代码。但不知何故我还是弄错了。

<script>
    const Http = new XMLHttpRequest();
    Http.open('post', 'localhost:3000');
    Http.send("sending something!");// this resolves to {} on the backend?
    Http.onload = function() {
     alert(Http.response); 
    };
</script>

这就是我尝试在我的 express 服务器上处理它的方式

const express = require("express");
let app = express()
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({
    extended: true
}));
app.post("/post", (req, res) => {
    console.log("inside of post");
    console.log(req.body);
})

app.listen(3000)

这是日志

inside of post
{}

我希望 console.log() 打印“发送内容!”我尝试使用 Http.send("sending something!"); 发送请求。

Answer 1

您已指定 body-parser 将正文解析为 url 编码格式，如果您传递这样的数据，该格式将起作用:

Http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Http.send("param1=value1&param2=value2");

/* console output:
{ param1: 'value1', param2: 'value2' }
*/

在您的情况下，传递的数据是简单的字符串，后端将其解释为空 JSON {}，因为它无法解析。

要使其正常工作，请尝试按如下方式设置数据格式

<script>
    const Http = new XMLHttpRequest();
    Http.open('post', 'localhost:3000');
    Http.setRequestHeader("Content-Type", "text/plain");
    Http.send("sending something!");
    Http.onload = function() {
     alert(Http.response); 
    };
</script>

在快速服务器中:

const express = require("express");
let app = express();
const bodyParser = require("body-parser");
// app.use(
//   bodyParser.urlencoded({
//     extended: true
//   })
// );

app.use(bodyParser.text({ type: "text/plain" })); // use this instead

app.post("/post", (req, res) => {
  console.log("inside of post");
  console.log(req.body);
  return req.body;
});

app.listen(3000);

然后您可能能够在后端读取消息 “发送内容!”。只需确保在发送时在 XMLHttpRequest 中设置正确的 contentType header ，并且在后端解析时也使用相同的类型。

有关 bodyParser 的更多信息，请参阅此 doc