express 解析 ajax post 数据 body 为空对象

问题描述：

前端使用 jquery 的 ajax 向后端发送 post 数据并携带参数，但是 express 解析的 body 为空对象。

代码：

使用 express 框架解析前端 post 的数据时

var express = require("express");
var bodyParser = require("body-parser");
var app = express();

app.use(bodyParser.urlencoded({ extended: false }));

app.post("/userName", (req, res) => {
  console.log(req.body);
  res.send("接受到了数据");
});

前端使用 jquery 的 ajax 进行传输数据

loginButton.addEventListener("click", (e) => {
	console.log("这里发送请求");
	$.ajax({
		type: "post",
        url: "/userName",
        contentType: "application/json",
        data: JSON.stringify({ userName: "xiaoming" }),
      }).done((msg) => {
        console.log("这里是返回内容", msg);
      });
    });

但是 express 解析到的前端 request 中的 body 为空对象。

原因是：

前端使用 jquery 的 ajax 进行 post 请求时，默认的 contentType 为：application/x-www-form-urlencoded

但是我在前端设置成了 application/json，即 ajax 在请求时会将用户携带的参数进行 json 形式的格式化。而后端解析 body： bodyParser.urlencoded({ extended: false }) 是解析 application/x-www-form-urlencoded 形式的参数的，因此后端解析出来的 body 为空对象。

解决方法：

方法一：
express 使用 app.use(bodyParser.json()); 替代 app.use(bodyParser.urlencoded({ extended: false })); 来解析 body

方法二：

前端设置contentType: application/x-www-form-urlencoded 并且删除data中的 JSON.stringify ，后端不改动还是 app.use(bodyParser.urlencoded({ extended: false })); 即可解析出 body。

contentType 中常见的选项有： application/x-www-form-urlencoded 、 application/json、text/xml 、 multipart/form-data 这些选项用于表明发送数据流的类型，后端根据类型进行对应的数据解析。

application/json 数据格式可以支持复杂情况，比如传输数据中对象中包含数组。
而如果用 appliacation/x-www-form-urlencoded 进行解析的话：会出现这种情况。