Angular调用ASP.NET MVC控制器接口报CORS预检请求错误如何解决？

问题根因 #

你遇到的报错核心是Angular发送的CORS预检OPTIONS请求被IIS请求过滤规则拦截，未返回200类正常状态码，因此触发CORS校验失败。普通AJAX调用如果未触发预检规则就可以正常访问，Angular HttpClient默认会对跨域带JSON请求体的POST请求自动发起OPTIONS预检，因此仅Angular调用会报错。

解决步骤 #

1. 修正IIS请求过滤的动词配置 #

你当前web.config的requestFiltering配置中只允许了GET/POST/PUT/DELETE四个动词，未允许OPTIONS预检请求，导致请求直接被拦截。修改verbs节点添加OPTIONS允许规则：

<security>
  <requestFiltering>
    <verbs allowUnlisted="false">
      <add verb="GET" allowed="true" />
      <add verb="POST" allowed="true" />
      <add verb="DELETE" allowed="true" />
      <add verb="PUT" allowed="true" />
      <add verb="OPTIONS" allowed="true" /> <!-- 新增这行 -->
    </verbs>
  </requestFiltering>
</security>

2. 新增OPTIONS请求全局处理逻辑 #

你的控制器仅定义了[HttpPost]的Action，没有处理OPTIONS请求的逻辑，会导致OPTIONS请求到达应用后返回404/405错误。在项目的Global.asax.cs文件的Application_BeginRequest方法中添加以下代码，直接响应OPTIONS请求返回200状态：

protected void Application_BeginRequest(object sender, EventArgs e)
{
    if (Request.HttpMethod == "OPTIONS")
    {
        Response.StatusCode = 200;
        Response.End();
    }
}

3. 路径校验（可选操作） #

确认接口路径是否正确：你当前调用的路径是http://localhost:52971/Home/MyLoginController，通常ASP.NET MVC中XXController是控制器类的命名后缀，Action方法不会带Controller后缀，建议确认你的HomeController下的Action方法名称是否为MyLogin，如果是则调用路径应改为http://localhost:52971/Home/MyLogin。

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