您的位置:首页 > 编程语言 > ASP

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

2013-12-10 10:17 477 查看

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

[code] public class WebApiApplication : System.Web.HttpApplication

{

protected void Application_Start()

{

GlobalConfiguration.Configuration.EnableCors();

//其他操作

}

}

[/code]
[/code]
和在《通过扩展让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上即可。

[code]
[code] [EnableCors(origins: "http://localhost:9527", headers: "*", methods: "*")]

public class ContactsController : ApiController

{

public IHttpActionResult GetAllContacts()

{

Contact[] contacts = new Contact[]

{

new Contact{ Name="张三", PhoneNo="123", EmailAddress="zhangsan@gmail.com"},

new Contact{ Name="李四", PhoneNo="456", EmailAddress="lisi@gmail.com"},

new Contact{ Name="王五", PhoneNo="789",EmailAddress="wangwu@gmail.com"},

};

return Json<IEnumerable<Contact>>(contacts);

}

}


public class Contact

{

 public string Name{ get; set;}

 public string PhoneNo{ get; set;}

 public string EmailAddress{ get; set;}

}

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

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

[code]
[code] public class HomeController : Controller

{

 public ActionResult Index()

{

 return View();

}

}

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

[code]
[code] <html>

<head>

 <title>联系人列表</title>

 <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.10.2.js")"></script>



</head>


<body>


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


 <script type="text/javascript">


 $(function ()


{


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


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


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


{


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


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


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


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


 html += "</ul>";


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


});


});


});


 

</script>

</body>

</html>

[/code]
[/code]



现在运行我们的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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: