如何向json-server提交JSON:API兼容数据？提交仅存ID问题排查

问题原因 #

json-server默认处理扁平的JSON结构，无法自动识别JSON:API规范中嵌套在data字段内的数据结构。你提交的请求体是一个包裹了data键的对象，json-server会将整个对象作为新条目存入data数组，但它只会识别顶层字段生成条目，因此仅保留了自动生成的id，嵌套在data内的type、attributes等内容被忽略。

解决办法 #

有两种方案可以解决这个问题，根据你的需求选择：

方案1：简化提交的数据结构（快速解决）

直接提交JSON:API规范中data字段对应的内容，去掉外层的data包裹：

const postData = {
  type: "posts",
  attributes: {
    title: "Third Post",
    content: "Trying Out!"
  }
}

修改后重新提交，json-server会完整保存所有字段，db.json中新增的条目会包含type、attributes等内容。

方案2：使用中间件解析JSON:API请求（严格遵循规范）

如果必须保持JSON:API的请求格式，需要通过自定义中间件解析请求体：

1. 创建middleware.js文件，添加解析逻辑：

module.exports = (req, res, next) => {
  if (req.method === 'POST' && req.headers['content-type'] === 'application/vnd.api+json') {
    // 提取JSON:API格式中的data字段作为实际保存的数据
    req.body = req.body.data;
  }
  next();
};

2. 启动json-server时指定该中间件：

json-server --watch db.json --middleware ./middleware.js

这样提交原始的JSON:API格式数据时，中间件会自动处理请求体，让json-server正确持久化所有字段。

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