Angular HttpClient接收Java服务返回JSON缺失nglink属性问题

我正在开发Java + Angular Web应用，遇到了菜单数据字段丢失的问题：服务器端日志显示返回的JSON包含nglink字段，但客户端接收的响应中该字段完全缺失，且开发者工具Network面板的响应里，原本的nglink字段变成了rl，导致客户端无法获取菜单的链接信息。

服务器端返回日志 #

{
  "status": true,
  "warnStatus": false,
  "isLogout": false,
  "errorMsg": "",
  "warningMsg": "",
  "techMsg": "",
  "rtndata": [],
  "rtndataDtl1": [],
  "rtndataDtl2": [],
  "rtndataDtl3": [],
  "rtndataDtl4": [],
  "rtnData2": [],
  "jsonObject": {
    "map": {
      "nglink": "",
      "icon": "pi pi-fw pi-calendar",
      "id": "2000",
      "label": "Setups",
      "items": {
        "myArrayList": [
          {
            "map": {
              "nglink": "",
              "icon": "",
              "label": "Misc.",
              "items": {
                "myArrayList": [
                  {
                    "map": {
                      "nglink": "/setup/city",
                      "icon": "pi pi-fw pi-home",
                      "label": "Cities",
                      "items": {
                        "myArrayList": []
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}

服务器端代码片段 #

Gson g = new Gson();
System.out.println("GET NG-MENU JSON Object : "+g.toJson(rtnObj));
return g.toJson(rtnObj);

客户端日志输出 #

"errorMsg":"""isLogout":"false
    jsonObject":"map":"icon":"pi pi-fw pi-calendar""id":"2000""items":"Array(1)
    0":{
   "label":"Misc.",
   "id":"",
   "icon":"",
   "items":Array(1)
}"length":1[
   [
      "Prototype"
   ]]:"Array(0)
    label":"Setups"[
   [
      "Prototype"
   ]]:"Object"[
   [
      "Prototype"
   ]]:"Object
    rtnData2":[
   
]"rtndata":[
   
]"rtndataDtl1":[
   
]"rtndataDtl2":[
   
]"rtndataDtl3":[
   
]"rtndataDtl4":[
   
]"status":"true
    techMsg":"""warnStatus":"false
    warningMsg":""

客户端代码片段 #

http.post<any>(this.weburldev + "basic/menu2", {
    appID: parentApplication.appID,
    userID: parentApplication.UserID,
  })
  .subscribe((response: any) => {
    // handle successful response here
    console.log(
      "Response from app menu service : " + this.weburldev + "basic/menu"
    );
    console.log(response);
  });

开发者工具Network面板响应数据 #

{
  "status": true,
  "warnStatus": false,
  "isLogout": false,
  "errorMsg": "",
  "warningMsg": "",
  "techMsg": "",
  "rtndata": [],
  "rtndataDtl1": [],
  "rtndataDtl2": [],
  "rtndataDtl3": [],
  "rtndataDtl4": [],
  "rtnData2": [],
  "jsonObject": {
    "map": {
      "icon": "pi pi-fw pi-calendar",
      "rl": "",
      "id": "2000",
      "label": "Setups",
      "items": {
        "myArrayList": [
          {
            "map": {
              "icon": "",
              "rl": "",
              "label": "Misc.",
              "items": {
                "myArrayList": [
                  {
                    "map": {
                      "icon": "pi pi-fw pi-home",
                      "rl": "/setup/city",
                      "label": "Cities",
                      "items": {
                        "myArrayList": []
                      }
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}

排查建议 #

1. 检查Java实体类注解：查看服务器端返回的实体类中，nglink字段是否添加了@SerializedName("rl")注解，这会导致Gson序列化时将字段名替换为rl。
2. 验证响应头配置：确认服务器端返回时是否设置了正确的Content-Type: application/json响应头，错误的内容类型可能导致Angular无法正确解析JSON。
3. 排查中间代理/过滤器：检查是否存在网关、代理服务器或后端过滤器修改了响应内容，将nglink替换为rl，可以直接通过Postman等工具调用后端接口验证原始返回数据。
4. 检查Angular拦截器：查看Angular项目中是否存在HTTP拦截器，是否对响应数据进行了过滤或字段重命名操作。
5. 确认Gson配置：检查Gson实例是否自定义了序列化策略，或者使用的Gson版本存在序列化字段名的bug。

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