从Angular 10调用REST Web API时遭遇CORS错误求助

排查与修复步骤： #

• 确认CORS依赖包已安装
  确保通过NuGet安装了Microsoft.AspNet.WebApi.Cors，未安装则执行命令：

  Install-Package Microsoft.AspNet.WebApi.Cors
  

• 检查WebApiConfig.cs配置顺序
  CORS配置必须在路由注册之前，否则不会生效，正确示例：

  using System.Web.Http;
  using System.Web.Http.Cors;
  
  namespace YourApiProjectNamespace
  {
      public static class WebApiConfig
      {
          public static void Register(HttpConfiguration config)
          {
              // 配置允许Angular所在的localhost:4200跨域
              var corsSettings = new EnableCorsAttribute("http://localhost:4200", "*", "*");
              config.EnableCors(corsSettings);
  
              // 注册Web API路由
              config.MapHttpAttributeRoutes();
  
              config.Routes.MapHttpRoute(
                  name: "DefaultApi",
                  routeTemplate: "api/{controller}/{id}",
                  defaults: new { id = RouteParameter.Optional }
              );
          }
      }
  }
  

• 验证全局配置是否生效
  若全局配置未起作用，可在目标控制器或Action上添加特性标记：

  [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]
  public class ValuesController : ApiController
  {
      // 控制器Action代码
  }
  

• 检查响应头是否包含CORS标识
  用浏览器开发者工具的「网络」面板查看API请求的响应头，确认存在Access-Control-Allow-Origin: http://localhost:4200。如果没有，检查Global.asax中是否调用了GlobalConfiguration.Configure(WebApiConfig.Register);，确保配置被加载。

• 处理预检OPTIONS请求
  若请求使用PUT/DELETE或自定义请求头，浏览器会先发OPTIONS预检请求。确保Web API未拦截该请求，需让OPTIONS请求正常返回200状态及CORS相关头。

• 临时排查（生产环境禁用）
  若以上步骤无效，可临时设置允许所有来源测试：

  var corsSettings = new EnableCorsAttribute("*", "*", "*");
  config.EnableCors(corsSettings);
  

  若能正常调用，说明之前的来源配置存在拼写错误（比如协议、端口不符）。

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