在《通过扩展让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", 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>

现在运行我们的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

ASP.NET Web API自身对CORS的支持:从实例开始的更多相关文章

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

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

  2. ASP.NET Web API自身对CORS的支持: CORS授权检验的实施

    通过<EnableCorsAttribute特性背后的故事>我们知道:由CorsPolicyProvider提供的CorsPolicy表示目标Action采用的资源授权策略,ASP.NET ...

  3. ASP.NET Web API 2 对 CORS 的支持

    CORS概念 跨域资源共享 (CORS) 是一种万维网联合会 (W3C) 规范(通常被认为是 HTML5 的一部分),它可让 JavaScript 克服由浏览器施加的同域策略安全限制. 所谓同域策略, ...

  4. Web API 2 对 CORS 的支持

    Web API 2 对 CORS 的支持 CORS概念 跨域资源共享 (CORS) 是一种万维网联合会 (W3C) 规范(通常被认为是 HTML5 的一部分),它可让 JavaScript 克服由浏览 ...

  5. 在ASP.NET Web API中实现CORS(跨域资源共享)

    默认情况下,是不允许网页从不同的域访问服务器资源的,访问遵循"同源"策略的原则. 会遇到如下的报错: XMLHttpRequest cannot load http://local ...

  6. 通过扩展让ASP.NET Web API支持W3C的CORS规范

    让ASP.NET Web API支持JSONP和W3C的CORS规范是解决"跨域资源共享"的两种途径,在<通过扩展让ASP.NET Web API支持JSONP>中我们 ...

  7. 跨域资源共享(CORS)在ASP.NET Web API中是如何实现的?

    在<通过扩展让ASP.NET Web API支持W3C的CORS规范>中,我们通过自定义的HttpMessageHandler自行为ASP.NET Web API实现了针对CORS的支持, ...

  8. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  9. (转)通过扩展让ASP.NET Web API支持JSONP

    原文地址:http://www.cnblogs.com/artech/p/3460544.html 同源策略(Same Origin Policy)的存在导致了“源”自A的脚本只能操作“同源”页面的D ...

随机推荐

  1. Linux学习笔记(15)-信号量

    在多线程或者多进程编程中,有一个非常需要关注的东西,那就是同步以及互斥问题. 同步是指多个进程之间的协作,而互斥是指多个进程之间,为了争夺有限的资源,而进行的竞争. 理论很高端,但经过自己几天的学习, ...

  2. Asp.net mvc页面传值-- dropdownlist

    后台传值 List<ConfigParamInfo> paramList = configParamBLL.GetModelList(" and parentID=1" ...

  3. bootstrap入门

    Bootstrap提供了如下重要的特性:❑一套完整的基础CSS插件.❑丰富的预定义样式表.❑一组基于jQuery的JS插件集.❑一个非常灵活的响应式(Responsive)栅格系统,并且崇尚移动先行( ...

  4. 《转》Unity3D研究院编辑器之创建Lua脚本模板

    Unity里能创建 c#脚本模板,但是如果我想创建Lua脚本模板怎么办呢?拓展一下编辑器吧. 设置一下Lua脚本的模板地址 :  Assets/Editor/Lua/Template/lua.lua ...

  5. Html 基础介绍 基础标签

    <head> <!-- 设置编码格式 --> <meta charset="UTF-8"> <!-- 设置作者 --> <me ...

  6. Simulink Memory vs Unit Delay

    Memoryブロック.Unit Delayブロック共に前回の入力値を出力しますが.動作するタイミングが異なります. ●Memoryブロック シミュレーションの各時刻(ステップ)で動作し.「1ステップ」 ...

  7. java合并pdf

    一.开发准备 下载pdfbox-app-1.7.1.jar包;下载地址:http://download.csdn.net/detail/yanning1314/4852276 二.简单小例子 在开发中 ...

  8. 如何使CEF支持Flash

    方法一:复制Chrome浏览器下的pepperFlash,通过cef命令行参数设置路径. public Form1() { InitializeComponent(); InitializeChrom ...

  9. MVC Razor视图引擎的入门

    首先我们来说说他的给我们开发者带来那些好处吧: Razor语法易于输入,易于阅读,微软当时是这样定义的:简洁,富有表现力和灵活性,支持所有文本编辑器,强大的智能提示功能,单元测试. Rozor文件类型 ...

  10. Qt下的udp编程

    项目需要一个基于udp的客户端, 看着Qt是有个QUdpSocket的类的, 但自带的例子和类的说明都没咋说明白: 怎么用一个QUdpSocket既当发送端, 又当接收端? 谷歌一顿后, 发现很多老内 ...