Vue应用调用.NET Core 3.1 WebAPI时的POST请求CORS预飞问题

你的问题出在CORS配置的冲突和错误点上，以下是具体修正方案：

1. 修正Startup.cs中的CORS配置 #

当前配置存在重复调用AddCors、策略冲突，以及AllowAnyOrigin与AllowCredentials不兼容的问题（浏览器禁止带凭证的跨域请求使用通配符Origin），统一修改为命名策略：

private readonly string _corsPolicy = "AllowVueClient";

public void ConfigureServices(IServiceCollection services)
{
    // 仅配置一次CORS策略，避免重复调用AddCors
    services.AddCors(options =>
    {
        options.AddPolicy(_corsPolicy, builder =>
        {
            builder
                // 明确指定前端Origin，不能用AllowAnyOrigin（因开启了withCredentials）
                .WithOrigins("http://localhost:8080")
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials();
        });
    });

    services.AddControllers(); // 纯API项目推荐使用AddControllers，而非AddControllersWithViews
    // 其他服务配置（如AddAuthorization等）...
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();
    app.UseRouting();

    // 关键：UseCors必须放在UseRouting之后、UseAuthorization之前
    app.UseCors(_corsPolicy);

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers(); // API项目用MapControllers更合适，无需MVC路由
    });
}

2. 关键配置说明 #

• 禁止AllowAnyOrigin与AllowCredentials混用：当前端开启axios.defaults.withCredentials = true时，后端必须指定明确的Origin，不能用通配符，否则浏览器会直接拒绝响应。
• 中间件顺序：UseCors必须在UseRouting之后、UseAuthorization之前执行，否则预飞OPTIONS请求会被后续中间件拦截，无法返回正确的CORS头。
• 移除重复的AddCors调用：你之前重复调用了services.AddCors()，会导致策略被覆盖，仅需一次配置即可。

3. 额外排查点 #

• 确认WebAPI的saveAnswers接口未拦截OPTIONS请求：.NET Core默认会自动处理预飞请求，但如果自定义了中间件，需确保不会拦截OPTIONS请求。
• 检查前端POST请求的Content-Type：如果是multipart/form-data等非标准类型，需在CORS策略中额外允许对应头，但你的情况是预飞请求失败，优先处理上述CORS配置即可。

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