如何让C# Web API方法允许任意来源的跨域调用？

我有一个C# Web API，其PlanItems方法代码如下：

public JsonResult PlanItems(string sessionId)
{
    Response.Headers.Add("Access-Control-Allow-Origin", "*");
    DTDBDataService svc = new DTDBDataService(_db);
    VM.PlanItems = svc.GetPlanItems(VM.User);

    return Json(VM.PlanItems);
}

使用Angular客户端调用该API的代码：

this.http.get<[DTPlanItem]>(url).subscribe( data => {
    console.log("Plan items: ", data); 

    for (let i = 0; i < data.length; i++)
    {
        console.log(data[i]);
        this.planItems.push(data[i]);
    }

    console.log("Loaded items: ", this.planItems);
});

本地开发时，http://localhost:4200的客户端调用https://localhost:44324/Planner/PlanItems?sessionId=e829fb5c-aa6d-43c9-99e7-0552afd8bc7e正常，但API部署后，客户端调用https://7822-54268.el-alt.com/Planner/PlanItems?sessionId=8d240409-09ba-4d9d-914a-7c0031fd8a6b时出现CORS错误：

Access to XMLHttpRequest at 'https://7822-54268.el-alt.com/Planner/PlanItems?sessionId=4207b27d-7f65-4289-beb5-8ae35c7c5da3' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

需要配置C# Web API允许任意来源调用。

1. 传统ASP.NET Web API（非Core） #

不建议在单个Action中手动添加Header，推荐全局配置CORS：

步骤1：安装NuGet包 #

安装Microsoft.AspNet.WebApi.Cors包。

步骤2：全局配置CORS #

打开App_Start/WebApiConfig.cs，添加CORS配置：

using System.Web.Http;
using System.Web.Http.Cors;

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // 允许所有来源、所有HTTP方法、所有请求头
        var corsPolicy = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(corsPolicy);

        // 原有路由配置
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

（可选）局部配置 #

如果不需要全局开启，可在Controller或Action上添加特性：

[EnableCors("*", "*", "*")]
public class PlannerController : ApiController
{
    public JsonResult PlanItems(string sessionId)
    {
        // 移除手动添加Header的代码
        DTDBDataService svc = new DTDBDataService(_db);
        VM.PlanItems = svc.GetPlanItems(VM.User);

        return Json(VM.PlanItems);
    }
}

2. ASP.NET Core Web API #

如果是ASP.NET Core项目，按以下方式配置：

步骤1：添加CORS服务与中间件 #

修改Program.cs：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS服务，定义允许所有来源的策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAllOrigins", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

builder.Services.AddControllers();

var app = builder.Build();

// 在路由之后、授权之前启用CORS中间件
app.UseCors("AllowAllOrigins");

app.UseAuthorization();

app.MapControllers();

app.Run();

（可选）局部应用策略 #

在Controller或Action上指定策略：

[EnableCors("AllowAllOrigins")]
[ApiController]
[Route("[controller]")]
public class PlannerController : ControllerBase
{
    [HttpGet("PlanItems")]
    public IActionResult PlanItems(string sessionId)
    {
        DTDBDataService svc = new DTDBDataService(_db);
        VM.PlanItems = svc.GetPlanItems(VM.User);

        return Json(VM.PlanItems);
    }
}

注意事项 #

• 务必移除Action中手动添加的Response.Headers.Add("Access-Control-Allow-Origin", "*");代码，避免与全局配置冲突。
• 生产环境若无需完全开放，建议限制允许的来源、方法和请求头，而非直接使用*；若确实需要允许任意来源，上述配置即可生效。

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