Angular 14 Form Data请求遭CORS拦截，Postman可正常请求

浏览器对包含文件上传的multipart/form-data请求会发送OPTIONS预检请求，如果后端CORS中间件顺序错误、未正确处理预检请求，或是前端手动设置了错误的请求头，都会导致跨域报错。Postman不会触发浏览器的预检机制，因此能正常请求。

1. 修正CORS中间件注册顺序 #

ASP.NET Core中CORS中间件必须放在UseRouting之后、UseAuthorization之前，否则无法正确拦截和处理预检请求。修改Startup.cs（或Program.cs）中的配置：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 其他中间件（如UseStaticFiles）
    app.UseRouting();

    // CORS必须放在此处
    app.UseCors(policy => policy
        .AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader());

    app.UseAuthorization();
    // 后续中间件（如UseEndpoints）
}

2. 显式暴露文件上传相关响应头 #

文件上传接口返回时可能会用到Content-Disposition头，需要显式允许浏览器访问该头：

app.UseCors(policy => policy
    .AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader()
    .WithExposedHeaders("Content-Disposition"));

3. 调整Angular端请求配置 #

Angular中使用FormData时，不要手动设置Content-Type头，让浏览器自动生成包含boundary参数的multipart/form-data头，否则会导致预检失败：

const formData = new FormData();
formData.append('file', file); // file为用户选择的文件对象
formData.append('modelField', modelValue); // 其他表单字段

// 直接发送，无需手动设置headers
this.http.post('/api/your-upload-action', formData).subscribe(
    res => console.log(res),
    err => console.error(err)
);

4. 确保OPTIONS预检请求被正常处理 #

如果存在自定义中间件或路由拦截了OPTIONS请求，添加以下代码优先处理预检：

app.Use(async (context, next) =>
{
    if (context.Request.Method == HttpMethod.Options.Method)
    {
        context.Response.StatusCode = StatusCodes.Status200OK;
        await context.Response.CompleteAsync();
        return;
    }
    await next();
});
// 该代码要放在CORS中间件之前

5. 排查协议混合问题 #

如果前端使用HTTPS、后端使用HTTP，浏览器会直接阻止跨域请求，即使CORS配置正确。确保前后端协议一致（均为HTTP或均为HTTPS）。

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