Vue.js结合.NET7开发遇CORS跨域问题：API已命中却仍报错

为什么API会被命中但浏览器仍报CORS错误？ #

浏览器的CORS安全机制针对不同请求类型有不同处理逻辑：

• 对于简单请求（如无自定义请求头、无凭据的GET/POST），浏览器会直接发送实际请求到后端，待收到响应后再检查响应头是否包含Access-Control-Allow-Origin。如果没有，浏览器会拦截响应结果并抛出你看到的错误，但此时后端已经完成了请求处理。
• 对于非简单请求，浏览器会先发送OPTIONS预检请求，预检不通过才会阻止实际请求。

你的场景属于前者，所以API被命中是正常的，错误是浏览器在响应阶段的拦截行为导致的。

可能的问题及修复方案 #

1. CORS中间件位置错误
   .NET7中，UseCors必须放在UseRouting之后、UseAuthorization之前，否则CORS配置不会作用到路由请求上。错误的位置会导致后端响应无法带上CORS头。

2. CORS策略配置冲突（凭据相关）
   如果前端请求带了凭据（如Cookie、Authorization头），后端不能同时使用AllowAnyOrigin()和AllowCredentials()——浏览器禁止通配符Origin与凭据共存。此时必须指定具体的前端Origin：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowVueApp", policy =>
    {
        policy.WithOrigins("http://localhost:5173") // 替换为你的Vue项目运行地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

3. 策略未被正确启用
   仅通过AddCors定义策略还不够，必须通过app.UseCors("策略名")全局启用，或者在控制器/Action上添加[EnableCors("策略名")]特性单独启用。

4. 其他中间件提前拦截响应
   如果有异常处理、认证等中间件在CORS之前返回了响应（比如未授权的错误页），这些响应不会带上CORS头，也会触发浏览器的CORS错误。确保CORS中间件在所有可能返回响应的中间件之前执行。

验证方式 #

用Postman直接请求API，检查响应头是否包含Access-Control-Allow-Origin、Access-Control-Allow-Credentials（如果带凭据的话）。如果这些头不存在，说明CORS配置未生效，按上述步骤排查即可。

内容的提问来源于stack exchange，提问作者dr.Xis