ASP.NET Core Web API 跨域资源共享 (CORS) 配置实战
在 Web 开发中，当一个域的 JavaScript 脚本尝试请求另一个域的资源时，会触发浏览器的同源策略限制。所谓"跨域"，是指协议、域名或端口号中任意一项不一致。在前后端分离的架构中，前端应用（如 Vue 或 React）通常与后端 Web API 部署在不同的域，因此配置跨域资源共享（CORS）是必不可少的环节。
1. 跨域的基本概念
默认情况下，出于安全考虑，浏览器会拦截跨域的 Ajax 请求。解决跨域问题的常见方案包括：
- JSONP（仅支持 GET 请求，已趋于淘汰）。
- 反向代理（如 Nginx 代理）。
- 服务端配置 CORS（跨域资源共享），这是目前最主流且标准的做法。
2. 在 ASP.NET Core 中集成 CORS
要在 ASP.NET Core 项目中启用 CORS，首先需要确保项目中包含 Microsoft.AspNetCore.Cors 相关包（现代模板已内置）。随后在 Program.cs 或 Startup.cs 中进行配置。
注册跨域策略
在依赖注入容器中定义一个或多个跨域策略。我们可以从配置文件中读取允许的来源，以增强灵活性。
// 假设在 appsettings.json 中定义了：
// "AllowedHostsList": "http://localhost:3000,http://www.example.com"
var builder = WebApplication.CreateBuilder(args);
// 获取配置的来源
var allowedOrigins = builder.Configuration.GetValue<string>("AllowedHostsList")?.Split(',') ?? Array.Empty<string>();
builder.Services.AddCors(options =>
{
options.AddPolicy("CustomCorsPolicy", policy =>
{
policy.WithOrigins(allowedOrigins) // 允许指定的域名访问
.AllowAnyHeader() // 允许任何请求头
.AllowAnyMethod() // 允许任何 HTTP 方法
.AllowCredentials(); // 允许携带 Cookie 等凭据
});
});
启用中间件
在请求处理管道中，必须正确放置 CORS 中间件。通常它应该位于 UseRouting 之后，并在 UseAuthorization 之前。
var app = builder.Build();
app.UseRouting();
// 启用跨域中间件，并应用指定的策略
app.UseCors("CustomCorsPolicy");
app.UseAuthorization();
app.MapControllers();
app.Run();
3. 在控制器中应用跨域特性
除了全局配置外，你还可以通过特性（Attribute）更精细地控制哪些 Controller 或 Action 支持跨域。这在只需要对部分接口开放跨域时非常有用。
using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
namespace MyWebApi.Controllers
{
[ApiController]
[Route("api/[controller]")]
// 在控制器级别启用指定的跨域策略
[EnableCors("CustomCorsPolicy")]
public class DataController : ControllerBase
{
[HttpGet]
public IActionResult Get()
{
return Ok(new { Message = "跨域请求成功！" });
}
[HttpPost]
[DisableCors] // 也可以针对特定的 Action 禁用跨域
public IActionResult SecurePost()
{
return Ok();
}
}
}
4. 注意事项
在配置 AllowCredentials() 时，WithOrigins 不能使用通配符 *。必须明确指定允许的来源域名，否则浏览器出于安全机制会拒绝执行。如果需要支持动态的任意域且携带凭据，需要通过逻辑判断来动态设置允许的 Origin 头。
