C# webApi 之Ajax跨域(带头部参数)

　　ajax跨域对于一个后端开发来说是经常需要处理的问题，通常遇到跨域我们会在返回Response的Headers里加入Access-Control-Allow-Origin（ response.Headers.Add("Access-Control-Allow-Origin", "*");)即可。

有一天你会发现当你需要在ajax的请求里加上header，加上这句也是行不通的。

　　接下来将我的处理方法拿出来大家讨论下。

　　首先，了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候，会先发出 "预请求" ，  就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！

　　第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。这里可以在权限拦截器（AuthorizeAttribute）中处理

List<string> hederList = new List<string>();
hederList.Add("x-requested-with");
hederList.Add("Content-Type");
hederList.Add("自定义1");
hederList.Add("自定义2");

if (filterContext.Request.Method == HttpMethod.Options)
{
    var resp = new HttpResponseMessage
    {
        StatusCode = System.Net.HttpStatusCode.Accepted
    };
    resp.Headers.Add("Access-Control-Allow-Headers", hederList);
    resp.Headers.Add("Access-Control-Allow-Origin", "*");
    filterContext.Response = resp;
    return;
} 

同时设置接口的类型，如下：

[HttpGet]
[HttpOptions]
public HttpResponseMessage GetUserInfo()
{
    return new HttpResponseMessage();
}

　　第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。此时 大多数人 会发现请求成功了，但是 有那么几个人会发现 请求成功了但是没有任何信息返回 why？因为你自定义的请求头在服务器响应中不存在！

就是上面的，hederList.Add("自定义1") 添加上自定义的header名，才能通过。

这些都完成之后客户端就能接收到服务器端的结果了，但是F12浏览器的Console还是会有异常，表示Access-Control-Allow-Origin设置不通过，这里需要在每一个返回的response里加上这句，就ok了。

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

　　当然我也看到很多人将这些配置(Access-Control-Allow-Origin、Access-Control-Allow-Headers)写在配置文件里，这种方式我试了不行，我也不知道咋回事，也许是我的方式不对吧！

 友情提示：resp.Headers.Add("Access-Control-Allow-Origin", "*") 这样设置是不安全的，上线建议换成自己的域名。