隨著深入使用ASP.NET Web Api，我們可能會在專案中考慮將前端的業務分得更細。比如前端專案使用Angularjs的框架來做UI，而資料則由另一個Web Api 的網站專案來支撐。注意，這裡是兩個Web網站專案了，前端專案主要負責介面的呈現和一些前端的相應業務邏輯處理，而Web Api則負責提供資料。

這樣問題就來了，如果前端通過ajax訪問Web Api專案話，就涉及到跨域了。我們知道，如果直接訪問，正常情況下Web Api是不允許這樣做的，這涉及到安全問題。所以，今天我們這篇文章的主題就是討論演示如何配置Web Api以讓其支援跨域訪問（Cors）。好了，下面我們以一個簡單的示例直接進入本文的主題。

首先開啟Visual Studio 2013,建立一個空白的解決方案，命名為：CrossDomainAccessWebAPI。

再建立一個空的Web Api專案，命名為：CrossDomainAccess.WebAPI

接著我們右鍵單擊剛才建立的解決方案,建立一個空的Web專案用來模擬我們的網站對WebAPI專案進行跨域呼叫，如下： 完成以上步驟以後，我們的解決方案目錄如下圖所示： 下面我們在模擬網站的Web專案中通過Nuget新增jQuery，一下是新增jQuery包的介面： 新增完成後，到這裡我們就完成了前期的準備工作。下面在WebAPI專案的Models資料夾中新增是一個實體類UserInfo,具體程式碼如下：

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace CrossDomainAccess.WebAPI.Models { public class UserInfo { public int Id { get; set; } public string UserName { get; set; } public string UserPass { get; set; } public string Email { get; set; } public DateTime RegTime { get; set; } } }

然後在WebAPI專案中新增一個示例控制器：UserInfoController，這個控制器用來返回資料集合，具體程式碼如下：

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using CrossDomainAccess.WebAPI.Models; namespace CrossDomainAccess.WebAPI.Controllers { public class UserInfoController : ApiController { /// <summary> /// 獲取使用者資訊集合的方法 /// </summary> /// <returns>返回使用者資訊集合</returns> public IHttpActionResult GetList() { //物件集合模擬資料 List<UserInfo> list = new List<UserInfo>() { new UserInfo() { Id = 1, UserName = "張三", UserPass = "FDASDFAS", Email = "[email protected]", RegTime = DateTime.Now }, new UserInfo() { Id = 2, UserName = "李四", UserPass = "FDASDFAS", Email = "[email protected]", RegTime = DateTime.Now }, new UserInfo() { Id = 3, UserName = "王五", UserPass = "FDASDFAS", Email = "[email protected]", RegTime = DateTime.Now }, new UserInfo() { Id = 4, UserName = "趙六", UserPass = "FDASDFAS", Email = "[email protected]", RegTime = DateTime.Now }, new UserInfo() { Id = 5, UserName = "田七", UserPass = "FDASDFAS", Email = "[email protected]", RegTime = DateTime.Now }, new UserInfo() { Id = 6, UserName = "王八", UserPass = "FDASDFAS", Email = "[email protected]", RegTime = DateTime.Now } }; return Ok(list); } } }

接著我們需要修改一下App_Start目錄下的WebApiConfig.cs檔案中webapi的路由規則，以便通過api/{controller}/{action}的方式進行訪問，同時讓修改序列化方式，讓WebAPI預設輸出json格式的資料，具體操作如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

using System; using System.Collections.Generic; using System.Linq; using System.Net.Http.Formatting; using System.Web.Http; namespace CrossDomainAccess.WebAPI { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API 配置和服務 // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); //清除所有序列化格式 config.Formatters.Clear(); //新增Json格式的序列化器 config.Formatters.Add(new JsonMediaTypeFormatter()); } } }

重新生成一下專案，並在瀏覽器中訪問，這時我們可以的到json格式的資料，如下：

複製程式碼 程式碼如下: [{"Id":1,"UserName":"張三","UserPass":"FDASDFAS","Email":"[email protected]","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":2,"UserName":"李四","UserPass":"FDASDFAS","Email":"[email protected]","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":3,"UserName":"王五","UserPass":"FDASDFAS","Email":"[email protected]","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":4,"UserName":"趙六","UserPass":"FDASDFAS","Email":"[email protected]","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":5,"UserName":"田七","UserPass":"FDASDFAS","Email":"[email protected]","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":6,"UserName":"王八","UserPass":"FDASDFAS","Email":"[email protected]","RegTime":"2016-04-21T10:36:50.7800569+08:00"}]

好了，到這裡我們Web Api端的資料輸出就準備好了。為了測試是否可以跨域訪問，我們再轉到CorsDemo.UI網站專案中。首先建立一個index.aspx頁面（這個命名自己可以任意取）後開啟，修改成如下的程式碼：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CrossDomainAccess.Web.Index" %> <!DOCTYPE html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-2.2.3.min.js"></script> <script type="text/javascript"> $(function () { $('#getData').click(function () { $.ajax({ dataType: 'json', success: function (data) { //以表格的形式在瀏覽器控制檯顯示資料,IE下不支援 console.table(data); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="跨域獲取資料" id="getData" /> </div> </form> </body> </html>

完成以上步驟以後，啟動WebAPI專案和Web專案，並在Web專案的Index頁面中點選跨域獲取資料按鈕，開啟瀏覽器控制檯檢視請求結果，在控制檯會出現如下結果：

控制檯提示我們跨域請求被阻止，同時提示CORS頭部資訊確實，所以我們可以通過去WebAPI配置CORS來讓其支援跨域訪問。

那現在我們在WebAPI專案中通過Nuget新增Microsoft.AspNet.WebApi.Cors ,然後在WebApiConfig.cs檔案中配置HttpConfiguration的EnableCors方法即可。具體操作如下：

using System; using System.Collections.Generic; using System.Linq; using System.Net.Http.Formatting; using System.Web.Http; using System.Web.Http.Cors; namespace CrossDomainAccess.WebAPI { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API 配置和服務 EnableCrossSiteRequests(config); // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); //清除所有序列化格式 config.Formatters.Clear(); //新增Json格式的序列化器 config.Formatters.Add(new JsonMediaTypeFormatter()); } /// <summary> /// 允許跨域呼叫 /// </summary> /// <param name="config"></param> private static void EnableCrossSiteRequests(HttpConfiguration config) { //對所有的請求來源沒有任何限制 var cors = new EnableCorsAttribute( origins: "*", headers: "*", methods: "*" ); config.EnableCors(cors); } } }

現在，我們再重新生成WebAPI專案並執行，接著在頁面http://localhost:31521/Index.aspx中點選按鈕“跨域獲取資料”，通過firebug的控制檯，我們可以看到資料跨域載入成功了，如下：