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自身的支援來實現“跨域資源共享”。

如圖右圖所示，我們利用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: "", 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>(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應用所在的站點“”設定為授權的源站點，後兩者則直接設定為“*”表示對此不作任何限制。

接下來們在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: 

   2: 

   3:     

   4:     

   1:

   2: 

   3: 

   4:     

   5:     

   6:         $(function ()

   7:         {

   8:             var url = "";

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

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

  11:                 {

  12:                     var html = "

  13:                     html += "

  14:                     html += "

  15:                     html += "

  16:                     html += "";

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

  18:                 });

  19:             });

  20:         });

  21:

   5: 

   6: 

現在執行我們的ASP.NET MVC程式，依然可以得到如右圖所示的輸出結果。從程式設計的角度來講，ASP.NET Web API針對CORS的實現僅僅涉及到兩個方面：

• 其一，HttpConfiguration的擴充套件方法EnableCors，它用於開啟ASP.NET Web API針對CORS的支援；

• 其二，EnableCorsAttribute特性，它為目標HttpController或者Action方法定義CORS授權策略。

但是整個CORS體系不限於此，在它們背後隱藏著一系列的型別，我們將會利用後續的文章對此作全面講述。