在ASP.NET应用中启用CORS遇配置错误，请求协助解决

问题场景 #

调用API时Chrome控制台抛出错误：

Access to XMLHttpRequest at 'http://localhost:60261/api/student/?Name=qwwertyqwe&Age=21' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

API本身可正常访问，但跨域请求被浏览器拦截，已安装CORS NuGet包，但在WebAPIConfig.cs中配置EnableCorsAttribute和config.EnableCors时出现错误。

解决方案 #

1. 确认安装正确的NuGet包

确保安装的是ASP.NET Web API专属的CORS包，执行以下命令重新安装（若之前安装有误）：

Install-Package Microsoft.AspNet.WebApi.Cors

2. 正确配置WebAPIConfig.cs

在WebApiConfig.cs中按以下步骤配置：

• 添加命名空间引用：

  using System.Web.Http.Cors;
  

• 在Register方法中配置CORS策略并启用：

  public static void Register(HttpConfiguration config)
  {
      // 允许localhost:4200跨域访问，允许所有请求头和HTTP方法
      var corsPolicy = new EnableCorsAttribute("http://localhost:4200", "*", "*");
      config.EnableCors(corsPolicy);
  
      // 其他Web API路由配置
      config.MapHttpAttributeRoutes();
      config.Routes.MapHttpRoute(
          name: "DefaultApi",
          routeTemplate: "api/{controller}/{id}",
          defaults: new { id = RouteParameter.Optional }
      );
  }
  

  开发环境临时允许所有源的话，可将第一个参数改为"*"，生产环境务必指定具体域名。

3. 排查配置报错原因

若配置时出现错误，通常是以下问题：

• 找不到EnableCorsAttribute或config.EnableCors：未添加System.Web.Http.Cors命名空间，或NuGet包未安装成功，重新安装包并确认命名空间引用。
• 参数错误：EnableCorsAttribute的三个参数分别为「允许的源」「允许的请求头」「允许的HTTP方法」，不可留空，允许所有则用*。

4. OWIN启动项目的特殊配置

如果API基于OWIN启动（存在Startup.cs），需在Startup.cs中优先配置CORS：

using Microsoft.Owin.Cors;
using Owin;

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        // 先启用CORS
        app.UseCors(CorsOptions.AllowAll);

        // 再配置Web API
        HttpConfiguration config = new HttpConfiguration();
        WebApiConfig.Register(config);
        app.UseWebApi(config);
    }
}

5. 验证配置生效

调用API后，在浏览器开发者工具的网络请求面板中查看响应头，确认存在Access-Control-Allow-Origin字段，值为你配置的源（如http://localhost:4200）。

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