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

简介:

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

10083557-f2f728995d054084bf60e0e05339642

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

10083600-b82ac5e75dec43429e929c6d4ba459e

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: 
   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>
10083601-2c6710f208e84125b777c15c07b80ef

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

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

但是整个CORS体系不限于此,在它们背后隐藏着一系列的类型,我们将会利用后续的文章对此作全面讲述。

CORS系列文章
[1] 同源策略与JSONP
[2] 利用扩展让ASP.NET Web API支持JSONP
[3] W3C的CORS规范
[4] 利用扩展让ASP.NET Web API支持CORS
[5] ASP.NET Web API自身对CORS的支持: 从实例开始
[6] ASP.NET Web API自身对CORS的支持: CORS授权策略的定义和提供
[7] ASP.NET Web API自身对CORS的支持: CORS授权检验的实施
[8] ASP.NET Web API自身对CORS的支持: CorsMessageHandler


作者:蒋金楠
微信公众账号:大内老A
微博: www.weibo.com/artech
如果你想及时得到个人撰写文章以及著作的消息推送,或者想看看个人推荐的技术资料,可以扫描左边二维码(或者长按识别二维码)关注个人公众号(原来公众帐号 蒋金楠的自媒体将会停用)。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
相关文章
|
1月前
|
JSON API 数据库
解释如何在 Python 中实现 Web 服务(RESTful API)。
解释如何在 Python 中实现 Web 服务(RESTful API)。
26 0
|
2月前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
115 4
|
2月前
|
IDE Java API
使用Java Web技术构建RESTful API的实践指南
使用Java Web技术构建RESTful API的实践指南
|
1月前
|
XML JSON API
通过Flask框架创建灵活的、可扩展的Web Restful API服务
通过Flask框架创建灵活的、可扩展的Web Restful API服务
|
1月前
|
缓存 监控 API
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
Python Web框架FastAPI——一个比Flask和Tornada更高性能的API框架
58 0
|
1月前
|
JSON API 数据格式
构建高效Python Web应用:Flask框架与RESTful API设计实践
【2月更文挑战第17天】在现代Web开发中,轻量级框架与RESTful API设计成为了提升应用性能和可维护性的关键。本文将深入探讨如何使用Python的Flask框架来构建高效的Web服务,并通过具体实例分析RESTful API的设计原则及其实现过程。我们将从基本的应用架构出发,逐步介绍如何利用Flask的灵活性进行模块化开发,并结合请求处理、数据验证以及安全性考虑,打造出一个既符合标准又易于扩展的Web应用。
652 4
|
1月前
|
存储 PHP 数据库
使用Net2FTP轻松打造免费的Web文件管理器并公网远程访问
使用Net2FTP轻松打造免费的Web文件管理器并公网远程访问
|
2月前
|
前端开发 JavaScript API
前端秘法番外篇----学完Web API,前端才能算真正的入门
前端秘法番外篇----学完Web API,前端才能算真正的入门
|
2月前
|
API 网络架构
解释 RESTful API,以及如何使用它构建 web 应用程序。
解释 RESTful API,以及如何使用它构建 web 应用程序。
88 0
|
2月前
|
存储 前端开发 搜索推荐
前端开发中值得关注的三个Web API
【2月更文挑战第4天】Web API是前端开发中非常重要的一部分,它们为开发者提供了众多的功能和特性,帮助我们构建更加高效、优美的Web应用。本文将介绍三个值得关注的Web API,包括Web Storage、Geolocation和Web Notifications,希望能够对前端开发者有所帮助。