在《通過擴展讓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
文章列表
留言列表
