ASP.NET Core 服务器未接收来自 Angular 前端发布调用的参数

我正在 Angular 中创建用户注册表单，下面是 ts

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;
      }
    });
  }

}

提交时调用我的 authService 注册方法（如下），该方法应调用我的 API 上的注册帐户端点

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
    );
  }
}

在我的 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 == "[email protected]")
    {
        success = true;
    }

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

它抛出了 400 个错误响应，我在 DevTools 中收到的响应是

{
    "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":"[email protected]","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>

代理.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;