ASP.NET Framework+Angular18删除数据时遭遇CORS预检请求错误

核心问题：OPTIONS 预检请求未返回 200 OK #

GET请求能正常执行，但DELETE属于非简单请求，浏览器会先发送OPTIONS预检请求，你的后端未正确处理该请求才导致报错。

1. 给OPTIONS请求直接返回200 #

在Global.asax的Application_BeginRequest方法中添加以下代码，确保OPTIONS请求直接通过：

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

这段代码要放在其他CORS相关逻辑之前，避免被后续代码拦截。

2. 修正web.config的CORS配置 #

确保配置包含OPTIONS和DELETE方法，同时允许必要的请求头：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

如果前端请求带有自定义头，要把对应的头添加到Access-Control-Allow-Headers中。

3. 排查路由和权限拦截 #

• 确认DELETE接口的路由配置正确，避免OPTIONS请求被路由规则误拦截。
• 如果使用了权限验证（比如Forms认证），要跳过OPTIONS请求的权限校验，否则预检请求会返回401/403状态码，引发报错。

4. 检查Angular代理配置细节 #

如果使用proxy.config.json，确保配置覆盖DELETE方法，路径匹配准确：

{
  "/api/*": {
    "target": "http://你的后端地址",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "headers": {
      "Connection": "keep-alive"
    }
  }
}

启动项目时必须指定代理配置：ng serve --proxy-config proxy.config.json

5. 用浏览器工具验证请求 #

打开浏览器开发者工具的Network面板，找到OPTIONS请求，查看它的响应状态码和响应头，确认是否返回200，以及CORS相关头是否正确返回。

内容的提问来源于stack exchange，提问作者Ahmed ismaiel el shaer