Angular前端POST请求后ASP.NET Core API控制器参数为Null求助

问题现象 #

启动前后端后，点击登录按钮后端接口能触发，但参数resource始终为Null；同时前端仅能访问根路径http://localhost:4200，/login或/api/login路由无法正常访问。

后端代码 #

LoginController #

[Route("api/")]
[ApiController]
public class LoginController : ControllerBase
{
    private readonly ILoginService _loginService;

    public LoginController(ILoginService loginService)
    {
        _loginService = loginService;
    }

    [HttpPost("login")]
    [AllowAnonymous]
    public async Task<IActionResult> Login([FromBody]UserForRouteDto resource, CancellationToken cancellationToken)
    {
        try
        {
            var response = await _loginService.Login(resource, cancellationToken);
            return Ok(response);
        }
        catch (Exception e)
        {
            return BadRequest(new { ErrorMessage = e.Message });
        }
    }
}

UserForRouteDto #

public class UserForRouteDto
{
    public string? Username { get; set; }
    public string? Password { get; set; }
    public string? Role { get; set; }

    public UserForRouteDto()
    {
            
    }
}

前端代码 #

UserService #

import { Injectable } from '@angular/core';
import { User } from '../models/user';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  
  private apiUrl = "https://localhost:7213"
  constructor(
    private http: HttpClient
  ) { }

  getLoginDetails(userDetails:User): Observable<void>{
    return this.http.post<void>(this.apiUrl+'/login',  userDetails);
  }
}

User接口 #

export interface User {
    Username: string,
    Password: string
    Role: string
}

已尝试方案 #

• 移除后端[FromBody]属性
• 修改前端手动设置请求头并序列化参数
• 改用HttpRequestMessage作为后端方法参数
  以上方案均未解决问题，还出现请求方法变为GET的异常情况。

解决步骤 #

1. 修复接口路径不匹配问题 #

后端路由配置为[Route("api/")] + [HttpPost("login")]，完整接口地址应为https://localhost:7213/api/login，但当前前端请求路径缺少/api前缀，导致参数解析失败。修改前端请求路径：

// 方式1：调整apiUrl
private apiUrl = "https://localhost:7213/api";
// 请求时使用
return this.http.post<void>(this.apiUrl+'/login',  userDetails);

// 方式2：保持apiUrl不变，拼接路径时补充/api
return this.http.post<void>(this.apiUrl+'/api/login',  userDetails);

2. 恢复正确的参数绑定方式 #

• 后端必须保留[FromBody]属性：该特性用于从请求体中解析JSON参数，移除后框架会尝试从URL参数绑定，自然无法获取值。
• 前端无需手动序列化参数：Angular的HttpClient.post会自动将对象序列化为JSON，并设置Content-Type: application/json请求头，手动处理反而可能导致格式错误，恢复原始调用即可。

3. 配置前端路由解决页面访问问题 #

无法访问/login是因为Angular未配置对应路由，需在app-routing.module.ts中添加路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component'; // 替换为实际Login组件路径

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' }, // 默认跳转登录页
  { path: 'login', component: LoginComponent }, // 配置/login路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

注意：/api/login是后端接口地址，不能直接在浏览器地址栏访问，需通过前端组件的登录按钮触发接口请求。

4. 排查请求方法变为GET的异常 #

改用HttpRequestMessage后出现GET请求，大概率是前端代码误调用了get方法，或路由配置存在重定向逻辑。需确保前端始终调用post方法，同时后端仅保留[HttpPost]的路由配置。

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