尝试 post Angular 将信息形成 ASP.NET 核心 API 时出现错误 400

Question

我是 Angular 的新手。我尝试按照 YouTube 的教程制作一个简单的 Angular 应用程序来执行 CRUD 操作。 angular 版本是 13。我使用的 API 是 ASP.NET Core 6。我为 API 编写了代码并使用 Swagger 对其进行了测试。它工作正常。当我使用 Angular 到 post 表单数据时，出现以下错误： API 代码是（相关部分）：

[ApiController]
[Route("api/[controller]")]
public class CardsController : Controller
{
private readonly CardsDbContext context;

        public CardsController(CardsDbContext context)
        {
            this.context = context;
        }
        //Get All Cards
        [HttpGet]
        public async Task<IActionResult> GetAllCards()
        {
            var cards = await context.Cards.ToListAsync();
            return Ok(cards);
        }
        //Get single card
        [HttpGet]
        [Route("{id:guid}")]
        [ActionName("GetCard")]
        public async Task<IActionResult> GetCard([FromRoute]Guid id)
        {
            var card = await context.Cards.FirstOrDefaultAsync(x => x.Id == id);
            if(card != null)
            {
                return Ok(card);
            }
            return NotFound("Card not found");
        }
        //Add single card
        [HttpPost]
        public async Task<IActionResult> AddCard([FromBody] Card card)
        {
            card.Id = Guid.NewGuid();
            await context.AddAsync(card);
            await context.SaveChangesAsync();
            return CreatedAtAction(nameof(GetCard), new { Id = card.Id}, card); 
        }
}

Angular中使用的形式：

<form #form="ngForm" (ngSubmit)="OnSubmit()">
        <div class="form-group">
          <label>Card Name:</label>
          <input type="text" name="cardName" [(ngModel)]="card.CardholderName">
        </div>
        <div class="form-group">
          <label>Card Number:</label>
          <input type="number" name="cardNumber" [(ngModel)]="card.CardNumber">
        </div>
        <div class="form-group form-group-inline">
          <div>
            <label>CVC:</label>
            <input type="number" name="cardCVC" [(ngModel)]="card.CardCVC">
          </div>
          <div>
            <label>Expiry Month:</label>
            <input type="number" name="expiryMonth" [(ngModel)]="card.ExpiryMonth">
          </div>
          <div>
            <label>Expiry Date:</label>
            <input type="number" name="expiryCVC" [(ngModel)]="card.ExpiryYear">
          </div>
        </div>
        <div class="form-group">
          <button type="submit">Save</button>
        </div>
      </form>

Angular中使用的服务：

export class CardsService {

  baseurl = "https://localhost:7195/api/cards";
  constructor(private http: HttpClient) { }

  //Get all cards
  GetAllCards(): Observable<Card[]>{
    return this.http.get<Card[]>(this.baseurl);
  }
  addCard(card: Card): Observable<Card>{
    card.id = "00000000-0000-0000-0000-000000000000";
    return this.http.post<Card>(this.baseurl, card);
  }
}

Angular中使用的主要成分（只有一个成分）：

export class AppComponent implements OnInit {
  title = 'Cards';
  Cards: Card[] = [];
  card: Card = {
    id: '',
    CardNumber: '',
    CardCVC: '',
    CardholderName: '',
    ExpiryMonth: '',
    ExpiryYear: ''
  }

  constructor(private cardService: CardsService) {

  }
  ngOnInit(): void {
    this.getAllCards();
  }

  getAllCards() {
    this.cardService.GetAllCards()
      .subscribe(
        response => {
          this.Cards = response
        }
      );
  }

  OnSubmit() {
    this.cardService.addCard(this.card).subscribe(
      response =>{
        console.log(response);
      }
    );
  }

}

我还在API中使用了下面的代码来允许CORS：

builder.Services.AddCors((setup) =>
{
    setup.AddPolicy("Default", (options) =>
    {
        options.AllowAnyMethod().AllowAnyHeader().AllowAnyOrigin();
    });
});
app.UseCors("Default");

我搜索了很多链接，但找不到解决我问题的好答案。

我试图将 angular 服务更改为如下内容：

addCard(card: Card): Observable<Card>{
    card.id = "00000000-0000-0000-0000-000000000000";
    return this.http.post<Card>(this.baseurl + "/addcard", card);
  }

但是报405错误

更新： Swagger 手册 POST 测试： Swagger01 Swagger02

Answer 1

<form #form="ngForm" (ngSubmit)="OnSubmit()">
        <div class="form-group">
          <label>Card Name:</label>
          <input type="text" name="cardName" [(ngModel)]="card.CardholderName">
        </div>
        <div class="form-group">
          <label>Card Number:</label>
          <input type="text" name="cardNumber" [(ngModel)]="card.CardNumber">
        </div>
        <div class="form-group form-group-inline">
          <div>
            <label>CVC:</label>
            <input type="text" name="cardCVC" [(ngModel)]="card.CardCVC">
          </div>
          <div>
            <label>Expiry Month:</label>
            <input type="text" name="expiryMonth" [(ngModel)]="card.ExpiryMonth">
          </div>
          <div>
            <label>Expiry Date:</label>
            <input type="text" name="expiryCVC" [(ngModel)]="card.ExpiryYear">
          </div>
        </div>
        <div class="form-group">
          <button type="submit">Save</button>
        </div>
      </form>

我通过在Angular中编辑卡片模型解决了这个问题。

尝试 post Angular 将信息形成 ASP.NET 核心 API 时出现错误 400

Error 400 when trying to post Angular form information into ASP.NET Core API

asp.net

angular

api

crud