ASP.NET Web API自身对CORS的支持：从实例开始

蒋金楠

发布于 2018-01-15 11:32:22

1.7K00

代码可运行

文章被收录于专栏：大内老A大内老A

运行总次数：0

代码可运行

在《通过扩展让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: GET http://localhost:3721/api/contacts?callback=jQuery110205729522893670946_1386232694513 &_=1386232694514 HTTP/1.1
   2: Host: localhost:3721
   3: Connection: keep-alive
   4: Accept: */*
   5: User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36
   6: Referer: http://localhost:9527/
   7: Accept-Encoding: gzip,deflate,sdch
   8:  
   9: HTTP/1.1 200 OK
  10: Cache-Control: no-cache
  11: Pragma: no-cache
  12: Content-Type: application/json; charset=utf-8
  13: Expires: -1
  14: Server: Microsoft-IIS/8.0
  15: X-AspNet-Version: 4.0.30319
  16: X-SourceFiles: =?UTF-8?B?RTpc5oiR55qE6JGX5L2cXEFTUC5ORVQgV2ViIEFQSeahhuaetuaPreenmFxOZXcgU2FtcGxlc1xDaGFwdGVyIDE0XFMxNDAzXFdlYkFwaVxhcGlcY29ud?=
  17: X-Powered-By: ASP.NET
  18: Date: Thu, 05 Dec 2013 08:38:15 GMT
  19: Content-Length: 248
  20:  
  21: jQuery110205729522893670946_1386232694513([{"Name":"张三","PhoneNo":"123","EmailAddress":"zhangsan@gmail.com"},{"Name":"李四","PhoneNo":"456","EmailAddress":"lisi@gmail.com"},{"Name":"王五","PhoneNo":"789","EmailAddress":wangwu@gmail.com}])

和在《通过扩展让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", headers: "*", methods: "*")]
   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>