.NET Core 2 Web API 跨域（CORS）问题求助

嘿，我来帮你搞定这个表单提交的问题～首先看你现在的代码用了jQuery来操作DOM元素，其实在Angular里更推荐用框架原生的方式处理表单，既能避免直接操作DOM的坑，也更贴合Angular的生态。不过我给你准备了两种方案，你可以按需选择：

方案一：完善现有FormData提交逻辑（结合Angular HttpClient） #

首先得确保你已经在项目根模块（比如AppModule）里导入了HttpClientModule，然后在组件中注入HttpClient服务。接下来修改你的uploadFormData方法：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 注入HttpClient服务
  constructor(private http: HttpClient) {}

  public uploadFormData(): void {
    // 用原生DOM API获取表单和文件输入框，尽量减少jQuery依赖
    const form = document.getElementById('inputForm') as HTMLFormElement;
    const fileInput = document.getElementById('fileUpload') as HTMLInputElement;
    
    const formData = new FormData();
    // 添加tenant字段，注意要和HTML表单控件的name属性一致
    formData.append('tenant', form['tenant'].value);
    
    // 处理文件上传，如果支持多文件可以循环遍历files数组
    if (fileInput.files && fileInput.files.length > 0) {
      const file = fileInput.files[0];
      formData.append('file', file, file.name); // 第三个参数为文件名，可选
    }
    // 其他表单字段可按类似方式添加，比如form['yourField'].value

    // 发送POST请求到目标API
    this.http.post('https://localhost:44302/api/input', formData, {
      reportProgress: true, // 如需显示上传进度可开启
      responseType: 'json'
    }).subscribe({
      next: (response) => {
        console.log('提交成功啦:', response);
        // 成功后可重置表单
        form.reset();
      },
      error: (error) => {
        console.error('提交出问题了:', error);
        // 这里可以添加用户提示，比如弹出错误消息
      }
    });
  }
}

方案二：使用Angular响应式表单（更推荐的正统玩法） #

响应式表单是Angular官方推荐的表单处理方式，更易维护和扩展，步骤如下：

1. 先在你的模块中导入ReactiveFormsModule（比如AppModule）
2. 组件内构建表单逻辑：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 定义表单组
  inputForm: FormGroup;

  constructor(
    private fb: FormBuilder, // 用于快速构建表单
    private http: HttpClient
  ) {
    // 初始化表单控件
    this.inputForm = this.fb.group({
      tenant: [''], // 初始值为空
      fileUpload: [null] // 文件控件初始值设为null
    });
  }

  ngOnInit(): void {}

  // 处理文件选择事件
  onFileChange(event: Event): void {
    const fileInput = event.target as HTMLInputElement;
    if (fileInput.files && fileInput.files.length > 0) {
      // 更新表单中的文件控件值
      this.inputForm.patchValue({
        fileUpload: fileInput.files[0]
      });
    }
  }

  uploadFormData(): void {
    const formData = new FormData();
    // 遍历所有表单控件，将值添加到FormData中
    Object.keys(this.inputForm.controls).forEach(key => {
      const value = this.inputForm.get(key)?.value;
      if (value) {
        if (key === 'fileUpload') {
          // 文件单独处理，带上文件名
          formData.append('file', value, value.name);
        } else {
          formData.append(key, value);
        }
      }
    });

    // 发送请求
    this.http.post('https://localhost:44302/api/input', formData).subscribe({
      next: res => {
        console.log('提交成功！', res);
        // 重置表单
        this.inputForm.reset();
      },
      error: err => {
        console.error('提交失败了', err);
      }
    });
  }
}

对应的模板HTML代码：

<form [formGroup]="inputForm" (ngSubmit)="uploadFormData()">
  <div class="form-group">
    <label for="tenant">Tenant:</label>
    <input type="text" id="tenant" formControlName="tenant" class="form-control">
  </div>
  <div class="form-group">
    <label for="fileUpload">上传文件:</label>
    <input type="file" id="fileUpload" (change)="onFileChange($event)" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="!inputForm.valid">提交</button>
</form>

必须注意的几个关键点 #

• 跨域问题：你的Angular应用运行在http://localhost:4200，API在https://localhost:44302，属于不同端口，浏览器会拦截跨域请求。必须在Web API端配置CORS允许该来源的请求。比如如果是ASP.NET Core的API，在Program.cs中添加：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularLocal",
        policy => policy.WithOrigins("http://localhost:4200")
                        .AllowAnyHeader()
                        .AllowAnyMethod());
});

// 记得在UseRouting之后、UseAuthorization之前启用CORS
app.UseCors("AllowAngularLocal");

• 字段名匹配：formData.append中的key必须和Web API接口接收的参数名完全一致！比如API的action参数是[FromForm] string tenant，那你append的key就得是tenant，否则接口无法获取到值。
• Content-Type设置：发送FormData时，Angular的HttpClient会自动将请求头的Content-Type设为multipart/form-data，不要手动设置这个头，否则会导致请求异常。

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