如何解决json-server处理POST请求时返回空响应体的问题

核心原因 #

• json-server默认POST请求会执行资源写入逻辑，若对应资源为单个对象而非数组，写入后不会返回你预设的静态值
• 路由配置的路径与实际请求路径不一致：你请求的是/api/post-request，但路由配置中是/api/postrequest，触发默认逻辑导致返回异常
• 若你未在fetch中添加响应体解析逻辑，也会误以为返回空

修复步骤 #

方案一：全局开启只读模式（最简单，适合纯mock场景） #

如果不需要使用json-server的增删改查能力，仅需要固定返回mock值，直接修改启动命令添加--read-only参数即可，该参数会将所有POST/PUT/DELETE请求视为GET请求，直接返回对应资源的预设值：

json-server src/configs/api/mocks/json-server-generator.js --routes src/configs/api/mocks/json-server-routes.json --watch --read-only

方案二：修正路由+单独配置该接口的POST逻辑（需要保留其他接口写入能力时使用） #

1. 修正json-server-routes.json的路径，和实际请求路径对齐：

{
  "/api/get-request": "/getrequest",
  "/api/post-request": "/postrequest"
}

2. 修改json-server-generator.js，添加自定义中间件处理该POST请求的返回：

const jsonServer = require('json-server')
const server = jsonServer.create()
const middlewares = jsonServer.defaults()

const data = {
  getrequest: { x: 'x' },
  postrequest: { y: 'y' }
}
const router = jsonServer.router(data)

// 单独处理POST请求返回预设值
server.post('/api/post-request', (req, res) => {
  res.json(data.postrequest)
})

server.use(middlewares)
server.use(jsonServer.rewriter(require('./json-server-routes.json')))
server.use(router)

module.exports = server

补充：确认fetch请求逻辑 #

fetch默认不会自动解析响应体，需要主动调用res.json()才能拿到返回值，确认你的请求代码包含该逻辑：

fetch(url, {
  method,
  headers: {
    'content-type': 'application/json'
  },
  body: JSON.stringify(payload)
})
.then(res => res.json()) // 必须添加该步骤解析响应体
.then(res => console.log(res)) // 可正常拿到{ y: 'y' }

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