Angular 15与JSON Server中POST请求无法新增数据的问题排查

1. 问题出在哪里 #

• 路径与工作目录不匹配：当你在项目根目录执行JSON Server启动命令时，指定的./src/app/data/employees.json路径看似正确，但实际存在两个核心问题：
  1. JSON Server会以当前运行命令的目录（项目根目录）为基准处理文件，你可能一直在查看src/app/data下的原文件，但新数据实际写入了根目录下自动生成的同名路径文件。
  2. src目录下的文件可能被IDE、Angular开发服务器锁定，导致JSON Server没有权限写入目标文件。
• 排除请求格式问题：你提到控制台显示对象格式正确且无报错，说明POST请求的结构、端点地址大概率是正确的。

2. 最可靠的修复方案 #

方案一：迁移JSON文件到项目根目录（推荐） #

这是最不容易出错的方式：

1. 将src/app/data/employees.json移动到项目根目录。
2. 修改启动命令为：

   npx json-server --watch employees.json --id empno
   

3. 确认EmployeeService的POST请求指向正确端点：

   // employee.service.ts
   addEmployee(employee: any): Observable<any> {
     return this.http.post('http://localhost:3000/employees', employee);
   }
   

   操作完成后，新数据会直接写入根目录下的employees.json，你可以直接查看该文件验证结果。

方案二：指定JSON Server工作目录（保留原文件位置） #

如果不想移动文件，使用--cwd参数强制JSON Server的工作目录为src/app/data：

npx json-server --watch employees.json --id empno --cwd ./src/app/data

这样JSON Server会直接监听并修改src/app/data/employees.json，避免路径混淆。

验证步骤 #

• 发送请求后，访问http://localhost:3000/employees，确认新数据是否存在。
• 查看JSON Server的终端日志，成功的POST请求会显示POST /employees 201 Created，以此确认请求被正确处理。

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