Why is the value received by nodejs always empty {}?

  node.js, question

The foreground uses xhr to send requests to the background, and the background uses nodejs to receive foreground data. I don’t know why the value received by node is always empty {};
If the foreground uses angularJS’s $http to send the request, the background can successfully receive the data.

//HTML

<body ng-app="app" ng-controller="ctrl">
 <input type="text" class="name">
 <input type="button" value="submit" class="submit" ng-click="sendData()">
 </body>

//XHR2

<script>
 var btn = document.querySelector('.submit');
 function sendText() {
 
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/xhr', true);
 xhr.withCredentials = true;
 var name = document.querySelector('.name');
 var data = {name: name.value};
 
 xhr.onload= function(){
 if(xhr.status == 200){
 console.log(xhr.response);
 bracket
 };
 xhr.onerror= function(){
 console.log('error occur')
 };
 xhr.send(data);
 bracket
 
 btn.onclick = function() {
 sendText();
 bracket
 
 </script>

//angular $http

<script>
 angular.module('app',[])
 .controller('ctrl', function($scope, $http){
 var name = document.querySelector('.name');
 $scope.sendData = function(){
 $http({
 method: 'POST',
 url: '/xhr',
 data: {name: name.value}
 }).then(res=>{
 console.log(res);
 });
 };
 });
 <script>

//app.js

var express = require('express');
 var app = express();
 var fs = require('fs');
 var bodyParser = require('body-parser');
 
 app.listen(3000, function(err) {
 if (err) console.log(err);
 console.log('server running on port 3000');
 });
 
 app.use(express.static('js'));
 app.use(bodyParser.urlencoded({extended: true}));
 app.use(bodyParser.json());
 
 app.get('/xhr', function(req, res) {
 Res.sendFile(__dirname plus' /xhr.html');
 });
 
 app.post('/xhr', function(req, res) {
 console.log(req.body);  //Empty {}
 res.end('hello');
 });

Screenshot of XHR2 Background Receiving Data

clipboard.png

AngularJS $http screenshot of background received data

clipboard.png

I have tested it, but there is something wrong with the data you sent. According to what you wrote, the content you sent is as follows:
Results of bag grabbing:抓包结果
This is not the json string you expect. If you really want to use json, you have to convert json objects into JSON strings.
Recommendedname1=value1Format, the reason is that you did not specify the type of content, should be added after openxhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");Just do it.