Angular 8 向.NET Core API上传文件时出现CORS跨域问题求助

原因说明 #

未携带文件时请求正常的原因是此时你没有添加错误的自定义请求头，请求符合CORS策略要求，所以可以正常访问接口。触发跨域报错完全是请求端配置错误和服务端CORS策略校验不匹配共同导致的。

1. Angular端配置修正 #

• 不要手动设置Content-Type: multipart/form-data请求头：当你传递FormData对象给Angular的HttpClient.post方法时，浏览器会自动添加正确的multipart/form-data请求头，同时自动生成请求必须的boundary分隔符。手动设置该头会覆盖浏览器的自动逻辑，导致请求缺少boundary参数无法被解析，最终触发CORS拦截。
• 不要在请求头添加Access-Control-Allow-Origin：该字段是服务端返回的响应头，请求端添加属于无效配置，部分CORS策略严格的服务端会直接拦截带该自定义头的预检请求，触发跨域错误。

修正后的代码如下：

const formData = new FormData();
this.selectedFiles.forEach((f) => formData.append('files', f));
formData.append('Name',"Test");
// 无需传递自定义headers配置，HttpClient会自动处理FormData对应的请求头
this.http.post(url,formData).subscribe();

2. .NET Core端校验修正 #

2.1 确认FormModel定义正确 #

需和前端提交的参数名完全匹配，示例如下：

public class FormModel
{
    public string Name { get; set; }
    public List<IFormFile> Files { get; set; }
}

2.2 确认CORS配置正确 #

需要保证CORS策略允许对应来源的POST请求，.NET 6+的Program.cs配置示例如下：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularApp", policy =>
    {
        // 测试环境可以用AllowAnyOrigin，生产环境请替换为你的Angular应用实际部署地址
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 中间件顺序必须正确，要放在UseRouting之前、UseHttpsRedirection之后
app.UseHttpsRedirection();
app.UseCors("AllowAngularApp");
app.UseRouting();
app.UseAuthorization();

2.3 可选：大文件上传调整 #

如果需要上传大文件，可以在接口上添加请求大小限制配置：

[HttpPost]
// 示例限制为100MB，可根据需求调整数值
[RequestSizeLimit(100 * 1024 * 1024)]
public object UploadData([FromForm] FormModel formModel)
{
    // 保存文件和插入数据库逻辑
}

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