Angular调用ASP.NET Core Web API返回[object Object]故障求解

1. 优先确认打印逻辑问题 #

你当前的打印写法本身会导致输出[object Object]：使用+做字符串拼接时，会自动调用对象的toString()方法，默认返回值就是[object Object]，不代表接口返回异常。
先修改打印代码：

console.log('Menu = ', response); // 逗号分隔打印，不会触发对象转字符串

修改后如果能正常打印JSON结构，说明接口请求本身是通的，只需要排查后续赋值逻辑即可。

2. 抓包确认接口请求响应是否正常 #

打开浏览器F12控制台的「Network」面板，筛选该接口的请求，检查以下项：

• 请求地址是否和Swagger测试的地址完全一致，包括前缀、参数值
• 响应头的Content-Type是否为application/json
• 响应体内容是否和Swagger返回的JSON结构完全一致，无格式错误、无多余乱码字符
• 状态码是否为200，无CORS跨域、404、400等错误

3. 检查后端接口序列化配置与返回值声明 #

• 你当前后端Action的返回类型声明为ActionResult<TruckMenu>，但实际返回的是IEnumerable<TruckMenuDto>类型的集合，二者不匹配，建议修正为：

  public async Task<ActionResult<IEnumerable<TruckMenuDto>>> GetByTruckId(int truckId)
  

• 确认ASP.NET Core的JSON序列化配置是否默认开启了驼峰命名转换：.NET Core 3.0+默认会把模型的帕斯卡命名（如TruckId）转成驼峰命名（truckId）返回给前端，如果你手动关闭了该配置，会导致前端驼峰格式的模型字段匹配不到值。

4. 检查前后端模型映射匹配 #

• 后端TruckMenuDto的导航属性名为Truck，对应序列化后是truck，但你前端Menu接口里对应的字段名是trucks（多了后缀s），字段名不匹配会导致该属性赋值失败
• 逐一检查其他字段的名称、类型是否完全对应，比如数值类型是否后端返回了字符串格式等

5. 检查Angular封装的请求方法逻辑 #

确认repository.getData方法的封装是否正确：

• 是否指定了正确的responseType: 'json'，如果误设为text/blob会导致响应解析异常
• 是否有全局的响应拦截器修改了返回值结构，比如把实际数据放到了response.body之类的属性下，你直接用response赋值就会拿到包装后的对象而非实际数据

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