如何解决HTML用fetch发数据到Express API时出现的JSON解析异常问题

问题根源 #

你遇到的是前后端请求头与解析中间件不匹配导致的请求体解析异常，你拿到的畸形req.body不是JSON字符串，是Express错误解析后的对象，所以手动调用JSON.parse会报错。
触发原因是前端发JSON请求时没有指定Content-Type: application/json，浏览器默认将请求标识为表单类型，后端的表单解析中间件会把你传入的完整JSON字符串当成表单键名拆分，就出现了你现在看到的结构。

解决步骤 #

1. 修正前端fetch配置 #

发JSON请求时必须在请求头中指定Content-Type为application/json，示例代码如下：

fetch('你的Express接口地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    address: address,
    town: town,
    details: details,
    appr: apr,
  })
})

2. 确认后端Express解析配置 #

确保你开启了JSON类型请求的解析中间件，无需额外手动解析请求体：

• Express 4.16.0及以上版本内置解析能力，配置如下：

const express = require('express')
const app = express()
// 开启JSON请求解析，必须配置
app.use(express.json())
// 如果同时需要解析表单请求，再加下面这行
app.use(express.urlencoded({ extended: true }))

• 旧版本使用body-parser的配置如下：

const bodyParser = require('body-parser')
app.use(bodyParser.json()) // 必须开启JSON解析
app.use(bodyParser.urlencoded({ extended: true }))

3. 验证结果 #

配置完成后，直接打印req.body即可拿到正常的JS对象，不需要手动调用JSON.parse。

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