小分享：我有幾張阿裡雲優惠券，用券購買或者升級阿裡雲相應產品最多可以優惠五折！領券地址：https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03
隨著深入使用ASP.NET Web Api，我們可能會在項目中考慮將前端的業務分得更細。比如前端項目使用Angularjs的框架來做UI，而數據則由另一個Web Api 的網站項目來支撐。注意，這裡是兩個Web網站項目了，前端項目主要負責界面的呈現和一些前端的相應業務邏輯處理，而Web Api則負責提供數據。
這樣問題就來了，如果前端通過ajax訪問Web Api項目話，就涉及到跨域了。我們知道，如果直接訪問，正常情況下Web Api是不允許這樣做的，這涉及到安全問題。所以，今天我們這篇文章的主題就是討論演示如何配置Web Api以讓其支持跨域訪問（Cors）。好了，下面我們以一個簡單的示例直接進入本文的主題。
首先打開Visual Studio 2013,創建一個空白的解決方案，命名為：Solution.Cors。
再創建一個空的Web Api 項目，命名為：CorsDemo.Api，如下圖：
接著我們右鍵單擊剛才創建的解決方案，如下：
創建一個空的Web網站，命名為：CorsDemo.UI，如下：
好了，完成以上步驟，你將看到如下的解決方案目錄：
下面我們在CorsDemo.UI的網站項目中通過Nuget程序包管理工具來添加我們需要的jQuery和Bootstrap包（引入 Bootstrap主要是為了美化我們的界面的，只需要一兩個css class就能制作出一個精美漂亮的按鈕，下文你將看到）。以下是添加jQuery包的界面：
按照上圖方法引用Bootstrap。到這裡，我們的准備工作就完成了。下面開始創建一個Web Api的示例控制器:UserController,這個控制器中只有一個返回IEnumerable<T>的方法，具體代碼如下：
using CorsDemo.Api.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace CorsDemo.Api.Controllers
{
[RoutePrefix("api/user")]
public class UserController : ApiController
{
[HttpGet, Route("list")]
public IEnumerable<User> GetUserList()
{
return new List<User> {
new User{Id=1,Name="Admin",Locked=false,CreateOn=DateTime.Now.ToShortDateString()},
new User{Id=2,Name="Peter",Locked=false,CreateOn=DateTime.Now.ToShortDateString()},
new User{Id=3,Name="Employee",Locked=true,CreateOn=DateTime.Now.ToShortDateString()}
};
}
}
}
User類：
namespace CorsDemo.Api.Models
{
public class User
{
public int Id { get; set; }
public string Name { get; set; }
public string CreateOn { get; set; }
public bool Locked { get; set; }
}
}
如果我們現在運行CorsDemo.Api這個項目，並打開：http://localhost:4543/api/user/list這個地址，我們將在浏覽器中看到XML格式的輸出，如下：
我們修改一下App_Start目錄下的WebApiConfig.cs文件，讓其默認輸出json格式的數據，如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http.Headers;
using System.Web.Http;
namespace CorsDemo.Api
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 配置和服務
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
}
}
重新生成CorsDemo.Api項目並打開http://localhost:4543/api/user/list，這時我們可以得到json的數據，如下：
[{“Id”:1,”Name”:”Admin”,”CreateOn”:”2015/10/26″,”Locked”:false},{“Id”:2,”Name”:”Peter”,”CreateOn”:”2015/10/26″,”Locked”:false},{“Id”:3,”Name”:”Employee”,”CreateOn”:”2015/10/26″,”Locked”:true}]
好了，到這裡我們Web Api端的數據輸出就准備好了。為了測試是否可以跨域訪問，我們再轉到CorsDemo.UI網站項目中。首先創建一個cors-demo.html頁面（這個命名自己可以任意取）後打開，修改成如下的代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Api 2 Cors Demo</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
</head>
<body>
<a class="btn btn-primary" id="getData">跨域獲取數據</a>
<script type="text/javascript">
$("#getData").click(function () {
$.ajax({
url: "http://localhost:4543/api/user/list",
success: function (response) {
console.log(response);
}
});
});
</script>
</body>
</html>
完成以下步驟後，我們在Visual Studio中cors-demo.html上右鍵單擊，在彈出的窗口中選擇“在浏覽器中查看”，Visual Studio會自動在默認的浏覽器（我這裡的浏覽器是Firefox）中打開cors-demo.html這個頁面。為了測試，我們先點擊一下這個頁面中 的“跨域獲取數據”這個按鈕（為了查看此時Web Api是否支持跨域訪問，我們需先打開Firefox的firebug插件，並定位到“控制台”選項卡）。
ajax請求結束後，我們會在控制台看到如下結果：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4543/api/user/list. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
怎麼樣，是不是提示我們：跨域請求被阻止，同時提示CORS頭部信息缺失，所以我們可以去Web Api配置CORS來讓其支持跨域訪問。
那現在我們就到CorsDemo.Api這個項目中去配置關於CORS的支持。不需要太多，在WebApiConfig.cs文件中配置HttpConfiguration的EnableCors方法即可。在修改配置前，我們需要通過Nuget來新增一些引用（Microsoft.AspNet.WebApi.Cors，它的依賴包會被自動引用到項目中），如下：
修改後的WebApiConfig.cs文件如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http.Headers;
using System.Web.Http;
using System.Web.Http.Cors;
namespace CorsDemo.Api
{
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}/{id}",
defaults: new { id = RouteParameter.Optional }
);
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
private static void EnableCrossSiteRequests(HttpConfiguration config)
{
var cors = new EnableCorsAttribute(
origins: "*",
headers: "*",
methods: "*"
);
config.EnableCors(cors);
}
}
}
現在，我們再重新生成CorsDemo.Api項目並運行，接著在頁面http://localhost:4631/cors-demo.html中點擊按鈕“跨域獲取數據”，通過firebug的控制台，我們可以看到數據跨域加載成功了，如下：
好了，這篇關於ASP.NET Web Api支持跨域請求的示例和演示就完成了。
幾點補充：
1.EnableCorsAttribute構造函數中的參數可以根據自己情況進行設置，比如origins，當其為”*”時，所以的域都可訪問api的資源，如果你只想要指定的域可訪問資源，則指定到具體的域即可
2.在Web Api的控制器中，我們還對單個Action進行跨域訪問限制，只需要在Action上設置EnableCors屬性即可，如：
[HttpGet]
[EnableCors("http://example.com","*","*")]
public User GetUser()
{
return new User { Id = 1, Name = "Admin", Locked = false, CreateOn = DateTime.Now.ToShortDateString() };
}
特別注意：以上只是支持Web Api跨域的示例，其中存在安全驗證等問題並沒有提及。所以，如需要正式的生產項目使用本文的技術，請在需要的時候考慮有關安全驗證等問題。安全問題，安全問題，安全問題。。。重要的事情說三遍！！！
參考頁面：http://qingqingquege.cnblogs.com/p/5933752.html
