跳到主要内容

CORS 跨域配置

CORS (Cross-Origin Resource Sharing) 是 ASP.NET Core 中处理跨域请求的机制。

基础配置​

Program.cs (.NET 6+)​

var builder = WebApplication.CreateBuilder(args);

// 添加 CORS 服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy
            .AllowAnyOrigin()      // 允许任何来源
            .AllowAnyHeader()      // 允许任何请求头
            .AllowAnyMethod();     // 允许任何 HTTP 方法
    });
    
    // 或者指定特定来源
    options.AddPolicy("AllowSpecific", policy =>
    {
        policy
            .WithOrigins("https://example.com", "https://www.example.com")
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 使用 CORS
app.UseCors("AllowAll");  // 或者不指定名称，使用默认策略

app.UseAuthorization();
app.MapControllers();

app.Run();

Startup.cs (.NET 5 及更早版本)​

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(o => o.AddPolicy("any", p =>
        {
            p.AllowAnyOrigin()
             .AllowAnyHeader()
             .AllowAnyMethod();
        }));
        
        services.AddControllers();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // 注意顺序：UseCors 必须在 UseRouting 之后，UseAuthorization 之前
        app.UseRouting();
        
        app.UseCors("any");  // 这里启用 CORS
        
        app.UseAuthorization();
        
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

应用 CORS 策略​

方式 1：控制器级别​

[EnableCors("any")]
public class AccountAPIController : ControllerBase
{
    [HttpGet]
    public IActionResult Get()
    {
        return Ok(new { message = "Hello World" });
    }
}

方式 2：方法级别​

public class AccountAPIController : ControllerBase
{
    [EnableCors("any")]
    [HttpGet]
    public IActionResult Get()
    {
        return Ok(new { message = "Hello World" });
    }
    
    [HttpGet("{id}")]
    public IActionResult GetById(int id)
    {
        return Ok(new { id });
    }
}

方式 3：全局应用​

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy
            .AllowAnyOrigin()
            .AllowAnyHeader()
            .AllowAnyMethod();
    });
});

var app = builder.Build();

// 不指定策略名称，使用默认策略
app.UseCors();  // 应用 DefaultPolicy

app.MapControllers();
app.Run();

常见配置场景​

1. 允许特定来源​

services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy
            .WithOrigins("http://localhost:3000", "https://your-frontend.com")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials();  // 允许携带 Cookie
    });
});

2. 允许特定 HTTP 方法​

services.AddCors(options =>
{
    options.AddPolicy("GetMethodOnly", policy =>
    {
        policy
            .WithOrigins("https://example.com")
            .AllowAnyHeader()
            .WithMethods("GET", "POST");  // 只允许 GET 和 POST
    });
});

3. 允许特定请求头​

services.AddCors(options =>
{
    options.AddPolicy("CustomHeaders", policy =>
    {
        policy
            .WithOrigins("https://example.com")
            .WithHeaders("Content-Type", "Authorization", "X-Custom-Header")
            .AllowAnyMethod();
    });
});

4. 开发环境宽松，生产环境严格​

var env = builder.Environment;

builder.Services.AddCors(options =>
{
    if (env.IsDevelopment())
    {
        // 开发环境允许所有来源
        options.AddPolicy("Development", policy =>
        {
            policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
        });
    }
    else
    {
        // 生产环境限制来源
        options.AddPolicy("Production", policy =>
        {
            policy
                .WithOrigins("https://www.yourdomain.com")
                .AllowHeaders("Content-Type", "Authorization")
                .WithMethods("GET", "POST", "PUT", "DELETE");
        });
    }
});

var app = builder.Build();

app.UseCors(env.IsDevelopment() ? "Development" : "Production");

注意事项​

1. UseCors 的位置​

// ✅ 正确顺序
app.UseRouting();
app.UseCors();           // 必须在 UseAuthorization 之前
app.UseAuthorization();
app.MapControllers();

// ❌ 错误顺序
app.UseCors();
app.UseRouting();        // 这样会导致 CORS 不生效
app.UseAuthorization();

2. AllowAnyOrigin 与 AllowCredentials​

// ❌ 不能同时使用
policy.AllowAnyOrigin()
      .AllowCredentials();  // 会抛出异常

// ✅ 正确做法：指定具体来源
policy.WithOrigins("https://example.com")
      .AllowCredentials();

3. 预检请求 (OPTIONS)​

CORS 会在某些情况下发送 OPTIONS 预检请求，确保你的应用能正确处理：

// 让 ASP.NET Core 自动处理 OPTIONS 请求
app.UseRouting();
app.UseCors();
app.UseAuthorization();
app.MapControllers();

测试 CORS​

使用浏览器开发者工具​

  1. 打开 Network 面板
  2. 查看请求的响应头中是否包含：
    • Access-Control-Allow-Origin
    • Access-Control-Allow-Methods
    • Access-Control-Allow-Headers

使用 curl 测试​

# 测试跨域请求
curl -H "Origin: https://example.com" \
     -H "Access-Control-Request-Method: GET" \
     -H "Access-Control-Request-Headers: Content-Type" \
     -X OPTIONS --verbose \
     https://your-api.com/api/values

常见问题​

问题 1：浏览器报错 "No 'Access-Control-Allow-Origin' header"​

原因：CORS 未正确配置或 UseCors 位置错误

解决：检查 UseCors 是否在 UseRouting 之后、UseAuthorization 之前

问题 2：Cookie 无法携带​

原因：使用了 AllowAnyOrigin 同时设置了 AllowCredentials

解决：使用 WithOrigins 指定具体来源

问题 3：自定义请求头被拒绝​

原因：未允许自定义请求头

解决：使用 WithHeaders 添加允许的请求头

参考链接​