Angular中Http Post请求时无法获取UserName属性问题求助

核心原因推测 #

能拿到token但UserName为undefined，大概率是前后端字段名映射不匹配或者后端未返回该字段，结合.NET Web API的特性，按以下步骤排查：

1. 先确认后端返回的实际响应结构 #

打开浏览器控制台的「Network」标签，找到登录的POST请求，查看「Response」里的JSON内容：

• 如果后端返回的是userName（驼峰命名），而前端接口定义的是UserName（帕斯卡命名），会因JSON大小写敏感导致映射失败；
• 如果响应里根本没有用户名相关字段，那就是后端接口未返回这个值。

2. 字段名不匹配的解决办法 #

方案一：修改前端接口对齐后端命名

把User接口的字段改成和后端一致的驼峰格式：

export interface User{
    userName: string; // 改为小写开头
    token: string;
    password: string;
}

同时把代码里的response.UserName替换为response.userName。

方案二：修改后端序列化规则保持帕斯卡命名

如果不想调整前端，在.NET Web API中配置JSON序列化，让返回字段名和前端一致：

• 若使用.NET Core/.NET 6+的System.Text.Json：

// 在Startup.cs或Program.cs中配置
services.AddControllers()
    .AddJsonOptions(options =>
    {
        // 关闭自动驼峰转换，保持类属性原命名（如UserName）
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

• 若使用Newtonsoft.Json（旧项目常用）：

services.AddControllers()
    .AddNewtonsoftJson(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });

3. 后端未返回UserName的排查 #

检查.NET登录接口：

• 确认返回的DTO类（如LoginResult）包含public string UserName { get; set; }属性；
• 确认登录逻辑中给该属性赋值（比如从数据库查询用户后，将user.UserName赋值给DTO）。

前端代码小优化 #

TypeScript建议使用小写string类型（大写String为包装对象，日常开发不用），调整接口：

export interface User{
    UserName: string;
    token: string;
    password: string;
}

同时可以直接打印整个响应内容，方便快速排查结构：

console.log("登录响应内容:", response);

内容的提问来源于stack exchange，提问作者Dr.aka