内联JavaScript与Node.js通信时POST请求参数为undefined如何修复

终端打印body: undefined由三处代码错误共同导致，按以下步骤修改即可解决：

错误原因 #

• Express默认不会解析POST请求携带的JSON格式载荷，需手动注册解析中间件
• 服务端取值字段错误：解析后的请求体数据存放在req.body对象中，代码读取了不存在的req.message属性
• 前端AJAX未声明请求体格式：jQuery发送POST请求默认使用application/x-www-form-urlencoded格式头，和实际发送的JSON字符串不匹配，会导致服务端解析失败

修改步骤 #

1. 调整服务端server.js代码 #

在所有路由定义前注册JSON解析中间件，同时修正接口内的取值字段：

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

// 注册JSON请求体解析中间件，必须放在路由定义之前
app.use(express.json());

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.post('/onclick', (req, res) => {
    // 改为读取req.body，移除错误的req.message取值
    console.log('body: '+ JSON.stringify(req.body));
    res.send(req.body);
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

如果使用4.16以下的旧版Express，不存在内置的express.json()中间件，需要先执行npm i body-parser安装依赖，将中间件替换为app.use(require('body-parser').json())即可，新版本无需额外操作。

2. 调整前端AJAX配置 #

在$.ajax配置项中新增contentType字段，明确声明请求体为JSON格式：

$.ajax({
    url:'/onclick',
    data: JSON.stringify(data),
    type: 'POST',
    // 声明请求体格式为JSON
    contentType: 'application/json',
    success: (responseData) => {
        console.log('Success!', responseData);
    },
});

修改完成后重启Node服务，再次触发按钮点击，终端即可正常打印前端传入的输入框内容，接口也能正常返回对应数据。

内容的提问来源于stack exchange，提问作者ADrakkar