Angular UI向ASP.NET Core API传参失败问题求助

问题描述：调试时可将用户名和密码传递给ASP.NET Core API，Swagger调用登录接口正常，但Angular UI输入数据后返回“unknown error”。

可能的问题及解决方法 #

1. 前端未处理错误回调 #

当前代码仅处理了订阅成功的情况，没有捕获错误信息，导致无法定位具体问题。需添加错误回调打印详细错误：

onSubmit() {
    console.log(this.loginform.value);
    var url = 'Auth/Login';
    this.Service.post(url,this.loginform.value).subscribe(
        (user:any) => {
            if(user.token) { // 后端返回token即代表登录成功
                this.route.navigate(["/dashboard"]);
            }
        },
        (error) => {
            console.error('登录错误详情:', error); // 打印具体错误信息
        }
    );
}

2. 前端判断逻辑错误 #

代码中if(user.status = true)是赋值操作而非比较，且后端返回的响应结构中并没有status字段（后端返回message和token），需修正判断逻辑：

// 替换原判断逻辑，根据后端返回的token是否存在判断登录状态
if(user.token) {
    this.route.navigate(["/dashboard"]);
}

3. 跨域资源共享（CORS）配置缺失 #

Swagger与API同域所以无问题，但Angular UI通常运行在不同端口，需在ASP.NET Core中配置CORS允许前端域名访问：

// .NET 6+ Program.cs 示例
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular",
        policy => policy.WithOrigins("http://localhost:4200") // 替换为你的Angular运行地址
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 在UseRouting之后、UseAuthorization之前添加
app.UseCors("AllowAngular");

4. 后端私有方法冗余属性 #

AuthenticateLogin作为私有方法，参数是从Login方法传入的，无需[FromBody]属性，需移除：

private Login AuthenticateLogin(User Logindetails)
{
    var Loginuser = _context.Login.FirstOrDefault(a => a.Email == Logindetails.username);

    if(Loginuser != null && Loginuser.password == Logindetails.password)
    {
        return new Login
        {
            Email = Loginuser.Email
        };
    }

    return null;
}

5. 请求URL路径问题 #

前端url = 'Auth/Login'可能缺少API基础路径（比如API根路径为/api），需补充完整路径或在Service中配置baseURL：

// 示例：补充API基础路径
var url = '/api/Auth/Login';

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