为何我的fetch POST请求会导致后端获取到undefined值

• 前端链路：signup.html在</body>标签前引入auth.js，定义AuthUp函数获取id为pass的输入框值，通过fetch向http://localhost:3000/api/SignUp发送POST请求，将pass值经JSON.stringify序列化后放入请求体，手动配置Content-Type: application/json请求头，将AuthUp绑定到按钮onclick点击事件触发
• 后端链路：配置对应POST路由，通过app.use(bodyParser.json())做请求体解析，从req.body中解构取出pass值打印日志后传入auth.SignUp做后续处理；VSCode提示bodyParser.json()存在废弃提醒，但已确认该配置本身解析逻辑无问题
• 异常表现：Postman测试同接口时请求体解析完全正常，唯独前端fetch发起的请求，后端打印的req.body中pass值为undefined，排查多日未定位根因

• 请求体挂载位置错误：fetch的请求配置对象必须将序列化后的JSON字符串放到body字段中，若错将body值嵌套进headers对象、或写到fetch方法的第一个参数（URL字符串）的同级外层，实际发出的POST请求会携带空请求体，后端无法解析到对应字段
• 请求模式配置错误：若为了规避跨域报错给fetch设置了mode: 'no-cors'，浏览器会强制将请求的Content-Type修改为text/plain，手动设置的application/json头不会生效，后端的json解析中间件无法处理该格式的请求体，最终拿到空的req.body
• 输入值取值异常导致序列化丢字段：若通过document.getElementById('pass')获取输入框值时，因DOM加载顺序问题、页面存在同id非输入元素、取值未做判空等情况拿到undefined，经过JSON.stringify处理时，值为undefined的键会被直接从序列化结果中剔除。举个实际表现：执行JSON.stringify({pass: undefined})的返回结果是{}，根本不会包含pass键，后端拿到的req.body是空对象，解构出来自然是undefined，很多人误以为自己传了pass值，实际序列化后根本不存在这个字段
• 跨域非简单请求预检拦截：当前端部署地址与后端端口不一致（如前端通过Live Server跑在5500端口、后端在3000端口）时，携带application/json头的POST请求属于非简单请求，浏览器会先发OPTIONS预检请求，若后端未正确配置CORS放行规则、未处理OPTIONS方法，实际POST请求的请求体不会被正常传递到后端接口
• 中间件注册顺序隐性冲突：虽Postman测试正常，但如果bodyParser.json()中间件的注册位置晚于跨域处理中间件、或存在其他中间件提前拦截了请求，会导致跨域场景下的请求无法经过json解析逻辑，出现req.body为空的情况

补充：bodyParser.json()的废弃提示不影响解析逻辑，Express 4.16+版本已内置express.json()能力，可直接替换原配置排除潜在版本兼容问题

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