Angular对接.NET后端登录注册接口请求未到达后端问题排查

你的代码一共存在3个核心问题，按优先级修复如下：

1. 未订阅Observable导致请求根本未发出 #

Angular的HttpClient所有请求方法返回的都是冷Observable，只有主动订阅才会真正触发网络请求。你当前代码中只调用了this.userService.Register()，没有调用.subscribe()，请求从未发出，所以不管路由拼写是否正确都不会有报错，也不会到达后端。

2. POST请求参数传递格式错误 #

HttpClient.post()方法的参数规则为：第一个参数是请求地址，第二个参数是请求体，第三个参数是全局配置项。你当前直接把email和password分别作为第二、第三个参数传入，参数传递完全不符合规则，就算请求发出去后端也接收不到参数。

3. 后端接口参数接收规则不匹配 #

POST请求默认会从请求体解析参数，你当前后端方法直接声明两个简单类型参数，默认会从Query参数中读取，和前端传递方式不匹配。 #

第一步：修改后端.NET接口 #

优先使用DTO接收POST请求体参数，更规范且易于扩展：

// 先新增注册请求DTO类
public class RegisterRequestDto
{
    public string Email { get; set; }
    public string Password { get; set; }
}

// 修改控制器方法
[HttpPost]
[Route("Register")]
public async Task<IActionResult> Register([FromBody] RegisterRequestDto request)
{
    if (ModelState.IsValid)
    {
        var user = new User() {UserName = request.Email, Email = request.Email};
        var result = await _userManager.CreateAsync(user, request.Password);
        if (result.Succeeded)
        {
            return Ok();
        }
    }
    return BadRequest();
}

第二步：修改Angular UserService #

把参数包装为请求体对象传入：

export class UserService {
  readonly ApiUrl = "https://localhost:44331/users"
  constructor(private http: HttpClient) { }

  LogIn(email:string, password:string){
    return this.http.post(this.ApiUrl + '/Login', { email, password });
  }
  Register(email:string, password:string){
    return this.http.post(this.ApiUrl + '/Register', { email, password });
  }
}

第三步：修改注册组件onSubmit方法 #

添加订阅触发请求，把提示逻辑放到请求回调中：

onSubmit(){
  this.submitted = true; // 注意你原来拼写错了subbmited，建议统一修正
  if(this.userForm.invalid){
    return;
  }
  // 调用接口并订阅，触发请求
  this.userService.Register(this.Email?.value, this.Password?.value)
    .subscribe({
      next: () => {
        alert('SUCCESS!! :-)\n' + JSON.stringify(this.userForm.value));
        // 注册成功后续逻辑，比如跳转到登录页
      },
      error: (err) => {
        console.error('注册失败', err);
        alert('注册失败，请检查输入后重试');
      }
    })
}

• 前端表单验证的初始化写法可以简化，不需要手动new FormControl：

ngOnInit(){
  this.userForm = this.formBuilder.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(6)]]
  })
}

• 后端要先配置好CORS跨域规则，允许Angular开发服务的地址访问，否则请求发出后也会被浏览器跨域策略拦截。

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