Angular 5调用.NET Core Web API POST接口问题求助

嘿，我来帮你搞定Angular 5向.NET Core API提交数据的事儿！先把你没写完的API代码补全，再一步步教你Angular端的实现，都是新手友好的操作~

你给出的代码没写完，我假设你要接收一个Audit实体，补全后的完整Post方法大概是这样：

[Produces("application/json")]
[Route("api/Audit")]
public class AuditController : Controller
{
    private readonly IConfiguration _configuration;
    private readonly CommomUtility _util;
    private readonly Login _login;

    public AuditController(IConfiguration configuration)
    {
        _configuration = configuration;
        _util = new CommomUtility(configuration);
        _login = new Login(configuration);
    }

    // 完整的Post方法，用[FromBody]接收前端JSON数据
    [HttpPost]
    public IActionResult PostAudit([FromBody] Audit audit)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState); // 参数验证失败返回400
        }

        try
        {
            // 这里写你的业务逻辑：比如调用工具类处理、存数据库等
            // 示例：_auditService.SaveAudit(audit);

            return Ok(audit); // 成功返回200和提交的数据
        }
        catch (Exception ex)
        {
            return StatusCode(StatusCodes.Status500InternalServerError, $"提交失败：{ex.Message}");
        }
    }
}

// 对应API的Audit实体类（你项目里应该有这个，列出来方便和Angular模型对应）
public class Audit
{
    public int Id { get; set; }
    public string Action { get; set; }
    public string UserId { get; set; }
    public DateTime CreatedDate { get; set; }
    // 其他你需要的业务字段
}

1. 创建和API对应的模型 #

在Angular项目里新建audit.model.ts：

export interface Audit {
  id?: number; // 新建时后端可能自动生成ID，所以设为可选
  action: string;
  userId: string;
  createdDate: Date;
  // 和API实体对应的其他字段
}

2. 生成HTTP请求服务 #

用Angular CLI快速生成服务：

ng generate service audit

然后在audit.service.ts里写提交数据的方法：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Audit } from './audit.model';

@Injectable()
export class AuditService {
  private apiUrl = 'http://localhost:5000/api/Audit'; // 替换成你的API实际地址

  constructor(private http: HttpClient) { }

  submitAudit(audit: Audit): Observable<Audit> {
    // 设置请求头，确保发送JSON格式数据
    const httpOptions = {
      headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };

    // 发送POST请求，返回后端响应的数据
    return this.http.post<Audit>(this.apiUrl, audit, httpOptions);
  }
}

3. 在组件里调用服务提交数据 #

比如在你的表单组件audit-form.component.ts里：

import { Component } from '@angular/core';
import { AuditService } from '../audit.service';
import { Audit } from '../audit.model';

@Component({
  selector: 'app-audit-form',
  templateUrl: './audit-form.component.html'
})
export class AuditFormComponent {
  // 初始化一个空的Audit对象，用来绑定表单输入
  audit: Audit = {
    action: '',
    userId: '',
    createdDate: new Date()
  };

  constructor(private auditService: AuditService) { }

  // 表单提交触发的方法
  onSubmit() {
    this.auditService.submitAudit(this.audit)
      .subscribe(
        response => {
          console.log('提交成功！返回数据：', response);
          // 这里可以加成功后的操作：比如重置表单、弹出提示
        },
        error => {
          console.error('提交失败：', error);
          // 处理错误：比如显示错误提示给用户
        }
      );
  }
}

4. 配置必要的模块 #

在app.module.ts里导入HttpClientModule并注册服务，不然HttpClient用不了：

import { HttpClientModule } from '@angular/common/http';
import { AuditService } from './audit.service';

@NgModule({
  imports: [
    // 其他已导入的模块...
    HttpClientModule
  ],
  providers: [AuditService], // 把服务注册到模块里
  // 其他配置...
})
export class AppModule { }

• CORS跨域问题：如果Angular和API不在同一个域名/端口，一定要在.NET Core的Startup.cs里配置CORS：

  // 在ConfigureServices方法里添加
  services.AddCors(options =>
  {
      options.AddPolicy("AllowAll",
          builder => builder.AllowAnyOrigin()
                            .AllowAnyMethod()
                            .AllowAnyHeader());
  });
  
  // 在Configure方法里添加（要放在UseMvc之前）
  app.UseCors("AllowAll");
  

• 字段名匹配：Angular模型用小驼峰、API实体用大驼峰没关系，.NET Core默认会自动映射JSON字段。
• 请求头问题：Angular的HttpClient默认会发送Content-Type: application/json，所以API用[FromBody]就能正确接收，不用额外配置。

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