Angular中Http.Post发送对象时出现无效JSON错误求助

1. 确认API实际返回内容 #

错误提示SyntaxError: Unexpected token 'P', "Planificad"... is not valid JSON，说明API返回的不是合法JSON，而是非JSON文本（比如页面内容、错误提示）：

• 打开浏览器开发者工具网络面板，找到POST请求，查看响应体完整内容，确认是否返回HTML页面或其他非JSON数据。
• 区分OPTIONS预检请求和实际POST请求，204可能是OPTIONS请求的响应，重点看POST请求的响应状态和内容。

2. 排查Angular请求序列化问题 #

Angular的HttpClient默认会序列化对象为JSON，但可能存在以下问题：

• 检查DataSave实例是否存在循环引用：子对象引用父对象会导致序列化失败，Aurelia序列化逻辑可能兼容这种情况，但Angular不行。可以用JSON.stringify(data)测试，若报错则说明存在循环引用。
• 尝试手动序列化后发送请求，替换原代码：

  save(data: DataSave) {
    const jsonData = JSON.stringify(data);
    const config = { headers: new HttpHeaders().set('Content-Type', 'application/json') };
    return this.http.post<any>(`${this.urlProyecto}/planning/save`, jsonData, config)
      .pipe(catchError(this.handleError));
  }
  

3. 检查Web API请求拦截逻辑 #

控制器断点未触发，说明请求未到达控制器，可能被中间件或拦截器处理：

• 查看Azure App Service的诊断日志，排查是否有请求被防火墙、路由规则拦截，或中间件抛出异常。
• 检查Web API全局异常处理中间件，确认是否在请求到达控制器前就返回了非JSON格式的错误内容。
• 验证路由路径是否正确：确认${this.urlProyecto}/planning/save与Web API的[Route("save")]组合后是有效路径。

4. 排查Azure环境变更 #

即使无代码发布，Azure环境可能自动更新：

• 检查App Service应用设置，确认连接字符串、环境变量是否被修改（比如数据库连接失效导致前置逻辑报错）。
• 查看App Service运行时版本，确认是否自动升级了.NET版本，导致序列化或路由逻辑变化。
• 检查网络规则，确认是否有新防火墙规则或VNet配置变更影响请求。

5. 对比Aurelia与Angular请求差异 #

用抓包工具捕获两个项目的请求，对比以下内容：

• 请求头：重点对比Content-Type、Accept等字段是否一致。
• 请求体：确认JSON结构、字段大小写、空值处理是否完全相同。

6. 简化请求定位问题 #

发送最小化的DataSave对象测试，逐步添加字段定位问题：

const testData = new DataSave(new Resumen(), "test-id", new DatosGrid(), new DatosGrid(), new DatosGrid(), new DatosGrid());
this.saveService.save(testData).subscribe(
  res => console.log(res),
  err => console.error(err)
);

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