在《通过扩展让ASP.NET Web API支持W3C的CORS规范》中我们通过自定义的HttpMessageHandler为ASP.NET Web API赋予了跨域资源共享的能力,具体来讲,这个自定义的CorsMessageHandler的自由主要体现在如下两个方面:其一,为简单跨域请求的响应和继预检请求后的真实跨域资源请求的响应添加CORS报头;其二,对从浏览器发送的预检请求予以响应。实际上ASP.NET Web API本身就提供了针对CORS的支持,就其实现原理来看,与我们的实现没有本质的区别。接下来我们通过实例演示如何利用ASP.NET Web API自身的支持来实现“跨域资源共享”。

如图右图所示,我们利用Visual Studio在同一个解决方案中创建了两个Web应用。从项目名称可以看出,WebApi和MvcApp分别为ASP.NET Web API和MVC应用,后者是Web API的调用者。我们直接采用默认的IIS Express作为两个应用的宿主,并且固定了端口号:WebApi和MvcApp的端口号分别为“3721”和“9527”,所以指向两个应用的URI肯定不可能是同源的。

ASP.NET Web API对CORS提供的原生支持实现在一个名为“Microsoft ASP.NET Web API 2 Cross-Origin Support”的NuGet包中。我们依然沿用上面这个通过跨域Ajax请求获取联系人列表的这个例子,我们右键选种WebApi项目并在上下文菜单中选择“管理NuGet包(Manage NuGet Package)”,在弹出的如左图所示的对话框中,我们输入“CORS”作为查询条件后会看到这个NuGet包头。

当我们安装这个包之后,现有的packages目录下会添加两个名称分别为“Microsoft.AspNet.Cors.5.0.0”和“Microsoft.AspNet.WebApi.Cors.5.0.0”,针对保存其中的两个程序集(System.Web.Cors.dll和System.Web.Http.Cors.dll)的引用被自动添加到WebApi项目中。

ASP.NET针对CORS的实现就实现在程序集System.Web.Cors.dll中,另一个程序集System.Web.Http.Cors.dll自然就是针对ASP.NET Web API的。在默认情况下,针对CORS的支持是关闭的,我们需要在Global.asax中按照如下的方式调用当前HttpConfiguration的扩展方法EnableCors显示开启针对CORS的支持。

   1: public class WebApiApplication : System.Web.HttpApplication
   2: {
   3:     protected void Application_Start()
   4:     {
   5:         GlobalConfiguration.Configuration.EnableCors();
   6:         //其他操作
   7:     }
   8: }

和在《通过扩展让ASP.NET Web API支持W3C的CORS规范》实现CORS的实例一样,ASP.NET Web API自身也是借助于应用在HttpController类型或者定义其中的Action方法的特性来定义CORS授权策略的,这个特性类型为System.Web.Http.Cors.EnableCorsAttribute,它定义在程序集System.Web.Http.Cors.dll中。我们只需要按照如下的方式将EnableCorsAttribute特性应用到定义在ContactsController中的Action方法GetAllContacts上即可。

   1:

//[EnableCors(origins: "http://localhost:9527,http://localhost:2412", headers: "*", methods: "*")]//多个url以逗号分隔
         [EnableCors(origins: "*", headers: "*", methods: "*")]//所有的url都可以

   2: public class ContactsController : ApiController
   3: {
   4:     public IHttpActionResult GetAllContacts()
   5:     {
   6:         Contact[] contacts = new Contact[]
   7:         {
   8:             new Contact{ Name="张三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},
   9:             new Contact{ Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},
  10:             new Contact{ Name="王五", PhoneNo="789",EmailAddress="wangwu@gmail.com"},
  11:         };
  12:         return Json<IEnumerable<Contact>>(contacts);
  13:     }
  14: }
  15:  
  16: public class Contact
  17: {
  18:     public string Name { get; set; }
  19:     public string PhoneNo { get; set; }
  20:     public string EmailAddress { get; set; }
  21: }

如上面的代码片断所示,我们为应用的EnableCorsAttribute特性指定了三个参数。根据参数名称和上面我们针对W3C的CORS规范的介绍,我们应该可以猜得到它们分别代表:授权的源站点,和请求所允许的自定义包头和HTTP方法。我们将客户端ASP.NET MVC应用所在的站点“http://localhost:9527”设置为授权的源站点,后两者则直接设置为“*”表示对此不作任何限制。

接下来们在MvcApp应用中定义如下一个HomeController,默认的Action方法Index会将对应的View呈现出来。

   1: public class HomeController : Controller
   2: {
   3:     public ActionResult Index()
   4:     {
   5:         return View();
   6:     }
   7: }

如下所示的是Action方法Index对应View的定义。我们的目的在于:当页面成功加载之后以Ajax请求的形式调用上面定义的Web API获取联系人列表,并将自呈现在页面上。如下面的代码片断所示,Ajax调用和返回数据的呈现是通过调用jQuery的getJSON方法完成的。

   1: <html>
   2: <head>
   3:     <title>联系人列表</title>
   4:     <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.10.2.js")"></script>
   1:  

   2: </head>

   3: <body>

   4:     <ul id="contacts"></ul>

   5:     <script type="text/javascript">

   6:         $(function ()

   7:         {

   8:             var url = "http://localhost:3721/api/contacts";

   9:             $.getJSON(url, null, function (contacts) {

  10:                 $.each(contacts, function (index, contact)

  11:                 {

  12:                     var html = "<li><ul>";

  13:                     html += "<li>Name: " + contact.Name + "</li>";

  14:                     html += "<li>Phone No:" + contact.PhoneNo + "</li>";

  15:                     html += "<li>Email Address: " + contact.EmailAddress + "</li>";

  16:                     html += "</ul>";

  17:                     $("#contacts").append($(html));

  18:                 });

  19:             });

  20:         });

  21:     
          </script>
   5: </body>
   6: </html>

现在运行我们的ASP.NET MVC程序,依然可以得到如右图所示的输出结果。从编程的角度来讲,ASP.NET Web API针对CORS的实现仅仅涉及到两个方面:

  • 其一,HttpConfiguration的扩展方法EnableCors,它用于开启ASP.NET Web API针对CORS的支持;
  • 其二,EnableCorsAttribute特性,它为目标HttpController或者Action方法定义CORS授权策略。

注意:如果出现“System.Web.Http.GlobalConfiguration..cctor()' to access field 'System.Web.Http.GlobalConfiguration.CS$<>9__CachedAnonymousMethodDelegate2' ” 错误,请使用Nuget包安装“Microsoft ASP.NET Web API 2.1”

使用ASP.NET Web API自带的类库实现对CORS的支持(在开发中使用这种方式)(转载)的更多相关文章

  1. ASP.NET Web API实践系列09,在Fiddler和控制台中模拟GET和POST请求

    ASP.NET Web API本质是由一个进程托管的一组类,需要宿主,这个宿主可以是ASP.NET应用程序,可以是MVC项目,可以是控制台应用程序,也可以是自己定制的宿主. 在VS2012中创建一个& ...

  2. ASP.NET Web API 过滤器创建、执行过程(一)

    ASP.NET Web API 过滤器创建.执行过程(一) 前言 在上一篇中我们讲到控制器的执行过程系列,这个系列要搁置一段时间了,因为在控制器执行的过程中包含的信息都是要单独的用一个系列来描述的,就 ...

  3. ASP.NET Web API 开篇示例介绍

    ASP.NET Web API 开篇示例介绍 ASP.NET Web API 对于我这个初学者来说ASP.NET Web API这个框架很陌生又熟悉着. 陌生的是ASP.NET Web API是一个全 ...

  4. ASP.NET Web API路由系统:路由系统的几个核心类型

    虽然ASP.NET Web API框架采用与ASP.NET MVC框架类似的管道式设计,但是ASP.NET Web API管道的核心部分(定义在程序集System.Web.Http.dll中)已经移除 ...

  5. ASP.NET Web API自身对CORS的支持: EnableCorsAttribute特性背后的故事

    从编程的角度来讲,ASP.NET Web API针对CORS的实现仅仅涉及到HttpConfiguration的扩展方法EnableCors和EnableCorsAttribute特性.但是整个COR ...

  6. MVC项目实践,在三层架构下实现SportsStore-09,ASP.NET MVC调用ASP.NET Web API的查询服务

    ASP.NET Web API和WCF都体现了REST软件架构风格.在REST中,把一切数据视为资源,所以也是一种面向资源的架构风格.所有的资源都可以通过URI来唯一标识,通过对资源的HTTP操作(G ...

  7. HttpClient + ASP.NET Web API, WCF之外的另一个选择

    WCF的野心造成了它的庞大复杂,HTTP的单纯造就了它的简单优美.为了实现分布式Web应用,我们不得不将两者凑合在一起 —— WCF服务以HTTP绑定宿主于IIS. 于是有了让人晕头转向的配置.让人郁 ...

  8. ASP.NET Web API(二):安全验证之使用HTTP基本认证

    在前一篇文章ASP.NET Web API(一):使用初探,GET和POST数据中,我们初步接触了微软的REST API: Web API. 我们在接触了Web API的后就立马发现了有安全验证的需求 ...

  9. ASP.NET Web Api构建基于REST风格的服务实战系列教程

    使用ASP.NET Web Api构建基于REST风格的服务实战系列教程[十]——使用CacheCow和ETag缓存资源 系列导航地址http://www.cnblogs.com/fzrain/p/3 ...

随机推荐

  1. MyEclipse------execute()使用方法

    execute()方法应该仅在语句能返回多个ResultSet对象,多个更新计数或ResultSet对象与更新计数的组合时使用. testExecute.jsp <%@ page languag ...

  2. nginx proxy超时报错 upstream timed out (110: Connec...

    环境介绍 服务器:centos6.4服务:nginx proxy 问题描述: 然后查找  /opt/usr/nginx/1.4.0/logs  错误 error.log日志提示如下 2015/01/0 ...

  3. 设置button不同状态下的背景色,即把这个颜色变成图片设置成,背景图片

    - (void)setBackgroundColor:(UIColor *)backgroundColor forState:(UIControlState)state { [self setBack ...

  4. "微信全球商业创新大赛-创意中国2015"国际MBA商业挑战赛开启

    微信商业化进程一直在摸索中前进,从未间断.近日由中欧国际工商学院与腾讯(Tencent)共同发起举办“微信全球商业创新大赛 - 创意中国2015”(We Win with WeChat - INNOV ...

  5. Spring AOP使用整理:自动代理以及AOP命令空间

    三.自动代理的实现 1.使用BeanNameAutoProxyCreator 通过Bean的name属性自动生成代理Bean. <bean class="org.springframe ...

  6. 关于Eclipse部署openfire3.8.2源码的体会

    因为公司要做人际银行的一个项目需要openfire(服务器)+asmack(客户端),所以需要对消息的推送及消息发送知识的积累.所以需要研究xmpp,以前不是很了解这个技术,现在需要学习.首先就得部署 ...

  7. NGUI之scroll view制作,以及踩的坑总结

    http://blog.csdn.net/monzart7an/article/details/23878505 链接: http://game.ceeger.com/forum/read.php?t ...

  8. scrollview里面多张图片,每张都能放大缩小

    http://blog.sina.com.cn/s/blog_5d68044001018s1n.html scrollview里面多张图片,每张都能放大缩小 - (void)viewDidLoad{  ...

  9. 台大《机器学习基石》课程感受和总结---Part 1(转)

    期末终于过去了,看看别人的总结:http://blog.sina.com.cn/s/blog_641289eb0101dynu.html 接触机器学习也有几年了,不过仍然只是个菜鸟,当初接触的时候英文 ...

  10. HLG2035广搜

    Diablo Time Limit: 1000 MS Memory Limit: 65536 K Total Submit: 42(21 users) Total Accepted: 23(20 us ...