Angular前端POST请求参数无法传递至ASP.NET Core后端问题排查

问题现象 #

使用Angular开发用户注册表单，提交时调用AuthService的register方法向ASP.NET Core后端register-account接口发起请求，后端控制器方法断点未触发，返回400 Bad Request，错误提示所有必填字段缺失，但前端表单已填写完整，请求载荷数据实际存在。

相关代码展示 #

Angular注册组件代码 #

import { Component } from '@angular/core';
import { AuthService } from '../_services/auth.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrl: './registration.component.css'
})
export class RegistrationComponent {
  form: any = {
    email: null,
    password: null,
    accountType: 1,
    name: null,
    address: null,
    phone: null
  };
  isSuccessful = false;
  isSignUpFailed = false;
  errorMessage = '';

  constructor(private authService: AuthService) { }

  onSubmit(): void {
    const { email, password, accountType, name, address, phone } = this.form;

    this.authService.register(email, password, accountType, name, address, phone).subscribe({
      next: data => {
        console.log(data);
        this.isSuccessful = true;
        this.isSignUpFailed = false;
      },
      error: err => {
        this.errorMessage = err.error.message;
        this.isSignUpFailed = true;
      }
    });
  }
}

Angular AuthService代码 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AccountType } from '../_classes/AccountType';
import { RegisterRequest } from '../_DTOs/RegisterRequest';

const AUTH_API = 'https://localhost:7033/api/account/';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private http: HttpClient) { }

  register(email: string, password: string, accountType: AccountType, name: string, address: string, phone: string): Observable<any> {
    const request: RegisterRequest = {
      email: email,
      password: password,
      accountType: accountType,
      name: name,
      address: address,
      phone: phone
    }

    return this.http.post(
      AUTH_API + 'register-account',
      {
        request
      },
      httpOptions
    );
  }
}

ASP.NET Core AccountController代码 #

using AML.Server.Interfaces;
using AML.Server.Models;
using Microsoft.AspNetCore.Mvc;

namespace AML.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AccountController : ControllerBase
    {
        private readonly IAccountRepository _accountRepository;

        public AccountController(IAccountRepository accountRepository)
        {
            this._accountRepository = accountRepository;
        }

        [HttpPost]
        [Route("register-account")]
        public async Task<bool> RegisterAccount(RegisterRequest request)
        {
            bool success = false;

            if (request.Email == "abc@hotmail.com")
            {
                success = true;
            }

            // Logic going to repo & return success response
            return success;
        }
    }
}

错误响应与请求载荷 #

400错误响应

{
    "type": "https://tools.ietf.org/html/rfc9110#section-15.5.1",
    "title": "One or more validation errors occurred.",
    "status": 400,
    "errors": {
        "name": [
            "The name field is required."
        ],
        "email": [
            "The email field is required."
        ],
        "phone": [
            "The phone field is required."
        ],
        "address": [
            "The address field is required."
        ],
        "password": [
            "The password field is required."
        ]
    },
    "traceId": "00-ef5889b3c6e2444528b8799e51a3107b-8ca9bab2705e4cc0-00"
}

请求载荷

{"request":{"email":"abc@hotmail.com","password":"testtest","accountType":1,"name":"Jordan Abc","address":"123 Fake Street","phone":"07123456789"}}

注册表单HTML代码 #

<app-navbar></app-navbar>
<div class="font-weight-bold">
  <h3 class="title-text">Registration</h3>
</div>
<div class="content col-md-12">
  <div class="registration-form">
    @if (!isSuccessful) {
    <form name="form"
          (ngSubmit)="f.form.valid && onSubmit()"
          #f="ngForm"
          novalidate>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email"
               class="form-control"
               name="email"
               [(ngModel)]="form.email"
               required
               email
               #email="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && email.errors }" />
        @if (email.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (email.errors['required']) {
          <div>Email is required</div>
          }
          @if (email.errors['email']) {
          <div>Email must be a valid email address</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password"
               class="form-control"
               name="password"
               [(ngModel)]="form.password"
               required
               minlength="6"
               #password="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && password.errors }" />
        @if (password.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (password.errors['required']) {
          <div>Password is required</div>
          }
          @if (password.errors['minlength']) {
          <div>Password must be at least 6 characters</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text"
               class="form-control"
               name="name"
               [(ngModel)]="form.name"
               required
               minlength="1"
               maxlength="30"
               #name="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && name.errors }" />
        @if (name.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (name.errors['required']) {
          <div>Name is required</div>
          }
          @if (name.errors['minlength']) {
          <div>Name is required</div>
          }
          @if (name.errors['maxlength']) {
          <div>Name must be at most 30 characters</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="address">Address</label>
        <input type="text"
               class="form-control"
               name="address"
               [(ngModel)]="form.address"
               required
               minlength="1"
               maxlength="75"
               #address="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && address.errors }" />
        @if (address.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (address.errors['required']) {
          <div>Address is required</div>
          }
          @if (address.errors['minlength']) {
          <div>Address is required</div>
          }
          @if (address.errors['maxlength']) {
          <div>Address must be at most 75 characters</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <label for="phone">Phone Number</label>
        <input type="tel"
               class="form-control"
               name="phone"
               [(ngModel)]="form.phone"
               required
               pattern="[0-9]{11}"
               #phone="ngModel"
               [ngClass]="{ 'is-invalid': f.submitted && phone.errors }" />
        @if (phone.errors && f.submitted) {
        <div class="invalid-feedback">
          @if (phone.errors['required']) {
          <div>Phone Number is required</div>
          }
          @if (phone.errors['tel']) {
          <div>Valid UK Phone Number is required</div>
          }
          @if (phone.errors['pattern']) {
          <div>Valid UK Phone Number is required (No spaces)</div>
          }
        </div>
        }
      </div>
      <div class="form-group">
        <button class="btn btn-primary btn-block">Register</button>
      </div>

      @if (f.submitted && isSignUpFailed) {
      <div class="alert alert-warning">
        Signup failed!<br />{{ errorMessage }}
      </div>
      }
    </form>
    } @else {
    <div class="alert alert-success">Your registration is successful!</div>
    }
  </div>
</div>

proxy.conf.js配置 #

const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7033';

const PROXY_CONFIG = [
  {
    context: [
      "/api/*"
    ],
    target,
    secure: false,
    
  }
]

module.exports = PROXY_CONFIG;

问题原因与解决方案 #

核心问题 #

前端发送的请求载荷将RegisterRequest对象包裹在了request属性中，但后端控制器方法期望直接接收RegisterRequest类型的对象，导致ASP.NET Core模型绑定失败，所有字段被判定为缺失。

修复方案 #

修改AuthService中的register方法，直接将request对象作为请求体发送，移除外层的{ request }包裹：

register(email: string, password: string, accountType: AccountType, name: string, address: string, phone: string): Observable<any> {
    const request: RegisterRequest = {
      email: email,
      password: password,
      accountType: accountType,
      name: name,
      address: address,
      phone: phone
    }

    // 直接传递request对象，而非嵌套在request属性中
    return this.http.post(
      AUTH_API + 'register-account',
      request,
      httpOptions
    );
  }

修改后请求载荷会变为：

{"email":"abc@hotmail.com","password":"testtest","accountType":1,"name":"Jordan Abc","address":"123 Fake Street","phone":"07123456789"}

此时后端模型绑定可以正确识别所有字段，控制器方法会正常触发，断点也能命中。

可选替代方案 #

如果后端需要保持接收嵌套结构，可修改控制器方法参数，使用[FromBody]并调整参数类型，或创建包含request属性的DTO类，但最简洁的方式是让前端发送与后端模型匹配的对象结构。

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