基于CORS实现WebApi Ajax 跨域请求解决方法
概述
ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作。在使用API的时候总会遇到跨域请求的问题,特别各种APP万花齐放的今天,API的跨域请求是不能避免的。
在默认情况下,为了防止CSRF跨站的伪造攻击(或者是 javascript的同源策略(Same-Origin Policy)),一个网页从一个域获取数据时就会收到限制。有一些方法可以突破这个限制,那就是大家熟知的JSONP, 这只是众多解决方法中一种,由于JSONP只支持GET的请求,如今的复杂业务中已经不能满足需求。而CORS(Cross Origin Resource Sharing )跨域资源共享,是一种新的header规范,可以让服务器端放松跨域的限制,可以根据header来切换限制或者不限制跨域请求。重要的是它支持所有http请求方式。
问题
XMLHttpRequest 跨域 POST或GET请求 ,请求方式会自动变成OPTIONS的问题。
由于CORS(cross origin resource share)规范的存在,浏览器会发送一次options嗅探,header带上origin,判断是否有跨域请求权限,服务器响应aess control allow origin的值,供浏览器与origin匹配,如果匹配则正式发送post请求,即便是服务器允许程序跨域访问,若不支持 options 请求,请求也会死掉。
原因
浏览器为了安全起见,会Preflighted Request的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法,以及不同类型的主题内容,也就是会先发送一个 options 请求,
问问服务器是否会正确(允许)请求,确保请求发送是安全的。
出现 OPTIONS 的情况一般为
1、非GET 、POST请求
2、POST请求的content-type不是常规的三个application/x- -form-urlencoded(使用 HTTP 的 POST 方法提交的表单)、multipart/form-data(同上,但主要用于表单提交时伴随文件上传的场合)、text/plain(纯文本)
3、POST请求的payload为text/html
4、设置自定义头部
OPTIONS请求头部中会包含以下头部Origin、Aess-Control-Request-Method、Aess-Control-Request-Headers,发送这个请求后,服务器可以设置如下头部与浏览器沟通来判断是否允许这个请求。
Aess-Control-Allow-Origin、Aess-Control-Allow-Method、Aess-Control-Allow-Headers
解决方法
此方法功能强大,可以解决ASP.NET Web API复杂跨域请求,携带复杂头部信息,正文内容和授权验证信息
方法一
public class CrosHandler:DelegatingHandler { private const string Origin = "Origin"; private const string AessControlRequestMethod = "Aess-Control-Request-Method"; private const string AessControlRequestHeaders = "Aess-Control-Request-Headers"; private const string AessControlAllowOrign = "Aess-Control-Allow-Origin"; private const string AessControlAllowMethods = "Aess-Control-Allow-Methods"; private const string AessControlAllowHeaders = "Aess-Control-Allow-Headers"; private const string AessControlAllowCredentials = "Aess-Control-Allow-Credentials"; protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) { bool isCrosRequest = request.Headers.Contains(Origin); bool isPrefilightRequest = request.Method == HttpMethod.Options; if (isCrosRequest) { Task<HttpResponseMessage> taskResult = null; if (isPrefilightRequest) { taskResult = Task.Factory.StartNew<HttpResponseMessage>(() => { HttpResponseMessage response = new HttpResponseMessage(System.Net.HttpStatusCode.OK); response.Headers.Add(AessControlAllowOrign, request.Headers.GetValues(Origin).FirstOrDefault()); string method = request.Headers.GetValues(AessControlRequestMethod).FirstOrDefault(); if (method != null) { response.Headers.Add(AessControlAllowMethods, method); } string headers = string.Join(", ", request.Headers.GetValues(AessControlRequestHeaders)); if (!string.IsNullOrWhiteSpace(headers)) { response.Headers.Add(AessControlAllowHeaders, headers); } response.Headers.Add(AessControlAllowCredentials, "true"); return response; }, cancellationToken); } else { taskResult = base.SendAsync(request, cancellationToken).ContinueWith<HttpResponseMessage>(t => { var response = t.Result; response.Headers.Add(AessControlAllowOrign, request.Headers.GetValues(Origin).FirstOrDefault()); response.Headers.Add(AessControlAllowCredentials, "true"); return response; }); } return taskResult; } return base.SendAsync(request, cancellationToken); } }
使用方式,在Global.asax文件添加
protected void Application_Start() { IOCConfig.RegisterAll(); AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration.Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); GlobalConfiguration.Configuration.MessageHandlers.Add(new CrosHandler()); }
方法二
配置文件中添加如下配置,此方法简单,应对简单的跨域请求
<system.webServer> <httpProtocol> <customHeaders> <add name="Aess-Control-Allow-Origin" value="" /> <add name="Aess-Control-Allow-Headers" value="Content-Type" /> <add name="Aess-Control-Allow-Methods" value="GET, POST,OPTIONS" /> </customHeaders> </httpProtocol> <system.webServer>
以上所述是长沙网络推广给大家介绍的基于CORS实现WebApi Ajax 跨域请求解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程