ExtJS前端对接.NET WebAPI2遇CORS错误headerdisallowedbypreflightresponse求助

问题根源 #

你的后端代码里重复添加了Access-Control-Allow-Headers响应头，第二次添加会直接覆盖第一次的内容，导致部分请求头未被允许，触发预检请求失败。

后端修复方案 #

将两次设置Access-Control-Allow-Headers的代码合并为一行，包含所有需要允许的请求头：

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        // 合并所有允许的请求头，避免覆盖
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, Accept");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}

额外排查点 #

• 如果你的ExtJS请求包含自定义头（比如Authorization、Token等），需要将这些头也追加到Access-Control-Allow-Headers的列表中
• 用浏览器开发者工具查看预检请求（OPTIONS）的响应头，确认Access-Control-Allow-Headers包含了前端实际发送的所有请求头
• 检查前端请求的Content-Type是否在允许范围内，ExtJS默认的application/json已包含在Content-Type中

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