CORS跨域 Ajax headers 问题

今天我们遇到了一个CORS跨域的问题
Ajax如下

var url = "http://localhost:11980/api/Demo/GetString"; //api地址

$.ajax({

    type: "get",

    url: url,

    data: null,

    headers:

        {

            SecretKey: "ec8b570ad4bd403783c52ecb5cdfa849",

            AppKey: "1259402909",

            UniqueKey: "987654321"

        },

    success: function (data) {

        alert(data);

    }

});

如果把 headers 去掉，CORS跨域是没有问题的，但是加上就完犊子了

解决方案
Global 文件中添加一下代码

protected void Application_BeginRequest(object sender, EventArgs e)

{

    var res = HttpContext.Current.Response;

    var req = HttpContext.Current.Request;

    //自定义header时进行处理

    if (req.HttpMethod == "OPTIONS")

    {

        res.AppendHeader("Access-Control-Allow-Headers", "Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name,Token,Cookie,SecretKey,UniqueKey,AppKey");

        res.AppendHeader("Access-Control-Allow-Methods", "POST,GET,PUT,PATCH,DELETE,OPTIONS");

        res.AppendHeader("Access-Control-Allow-Origin", "*");

        res.StatusCode = ;

        res.End();

    }

}

Filters

public class ActionAuthFilters : ActionFilterAttribute

{

    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)

    {

        actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");

        actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Headers", "*");

        actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Methods", "*");

        base.OnActionExecuted(actionExecutedContext);

    }

}

Action

[ActionAuthFilters]

[HttpGet]

public string GetString()

{

    return "OK";

}

解决问题

解释为啥
因为 ajax 中添加了 headers
所以浏览器会发送两次请求
第一次是OPTIONS 类型的请求，这个请求会询问服务器支持哪些请求方法（GET,POST等），支持哪些请求头等等服务器的支持情况。等到这个请求返回后，如果原来我们准备发送的请求符合服务器的规则，那么才会继续发送第二个请求，否则会在Console中报错。
第二次才是我们写的那个 Get Post 请求

所以需要在 Application_BeginRequest 中判断如果是OPTIONS 类型的请求直接返回OK，并且告诉浏览器我们支持什么类型的请求，参数，URL
然后浏览器根据 Application_BeginRequest 中的配置在进行后续的操作

巴特西

CORS跨域 Ajax headers 问题

最新文章

热门文章