web端跨域調用webapi
在做Web開發中，常常會遇到跨域的問題，到目前為止，已經有非常多的跨域解決方案。
通過自己的研究以及在網上看了一些大神的博客，寫了一個Demo
首先新建一個webapi的程序，如下圖所示：
由於微軟已經給我們搭建好了webapi的環境，所以我們不必去添加引用一些dll，直接開始寫代碼吧。
因為這只是做一個簡單的Demo，並沒有連接數據庫。
第一步我們要在Models文件夾里添加一個實體類Employees,用來存放數據。
Employees.cs里的內容如下：
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5
6 namespace APIApplication.Models
7 {
8 public class Employees
9 {
10 public int? Id { get; set; }
11 public int? DepartmentId { get; set; }
12 public string Name { get; set; }
13 public string Job { get; set; }
14 public string Gender { get; set; }
15 public string PhoneNum { get; set; }
16 public string EmailAdderss { get; set; }
17 public string Address { get; set; }
18 }
19 }
添加完實體類之后我們的重頭戲即將開始，那就是controller
接着我們在Controller文件夾下新建一個控制器，取名叫EmployeesController
注意在添加控制器的時候要選擇空API控制器模板
如圖所示：
在控制器里我們要添加如下代碼：
在添加代碼之前我們要添加引用：using APIApplication.Models;
1 static List< Employees> emps;
2 static EmployeesController()
3 {
4 emps = new List< Employees>();
5 emps.Add( new Employees { Id = 1, DepartmentId = 1, Name = "張三", Gender = "男" , Job = "ASP.NET工程師" , PhoneNum = "1886 0922483", EmailAdderss = "zhangsan@123.com" , Address = "江蘇省蘇州市獨墅湖大道228號" });
6 emps.Add( new Employees { Id = 2, DepartmentId = 2, Name = "李四", Gender = "女" , Job = "web前端工程師" , PhoneNum = "1886 0922483", EmailAdderss = "lisi@123.com" , Address = "江蘇省蘇州市獨墅湖大道228號" });
7 }
這段代碼的作用就是往實體Employees類里存儲數據。這里我只添加了兩條數據僅供大家參考。
接下來我們要實現CRUD功能：
1 public IEnumerable <Employees > Get(int ? id = null )
2 {
3 return from employee in emps where employee.Id.Equals(id) || string.IsNullOrEmpty(Convert .ToString(id)) select employee;
4 }
5 public void Post( Employees employee)
6 {
7 employee.Id = 3;
8 emps.Add(employee);
9 }
10 public void Put( Employees employee)
11 {
12 emps.Remove(emps.Where(e => e.Id == employee.Id).First());
13 emps.Add(employee);
14 }
15 public void Delete( int id)
16 {
17 emps.Remove(emps.Where(e => e.Id == id).FirstOrDefault());
18 }
在這里Get是獲取員工傳入參數id是返回的就是對應id的數據，為空就是全部數據
Post是添加數據
Put是修改數據Put比較特殊，它在執行修改的時候是根據修改數據的ID去查找這條數據，然后刪除掉，在添加新的數據。
Delete當然就是刪除了。
接下來是見證奇跡的時刻。我們點擊運行，在瀏覽器里輸入localhost:****/api/employees
然后我們會看到一個XML的文檔
如下圖所示：
到此我們完成了幾個基本的WebApi的Get方法。
今天我們講的是跨域調用WebApi
什么是跨域呢？
JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。通常來說,跨域分為以下幾類：
在跨域問題上，域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應着兩個域或兩個域是否在同一個ip上。
想詳細了解跨域的同學可以訪問：http://twlidong.github.io/blog/2013/12/22/kua-yuan-zi-yuan-gong-xiang-cross-origin-resource-sharing-cors/
了解了跨域之后我們要開始繼續往下看了。
web端調用api分為前端調用即（AJAX）后端調用即（.net）
我先從AJAX開始講如何實現跨域
首先新建MVC項目，這里我就不截圖了，相信大家都會的。
這里我們用Jquery的ajax()方法，mvc默認會幫我們引入jquery
我們只需要寫如下代碼就可以了：
1 <script>
2 $(document).ready( function () {
3 $.ajax({
4 type: 'GET',
5 url: 'http://localhost:7974/api/employees/get',
6 dataType: 'JSON',
7 success: function (data) {
8 alert( "姓名：" + data[0].Name + " 性別：" + data[0].Gender + " 住址：" + data[0].Address);
9 }
10 });
11 })
這里的url是你的api的地址映射/api/employee/get是調用get方法獲取所有數據
為了方便演示我就把獲取的數據alert出來了。
按照我的步驟你們一定沒有成功吧？
大家思考一下為什么會出現如下錯誤信息
在這里跟大家解釋一下 Access-Control-Allow-Origin是HTML5中定義的一種服務器端返回Response header，用來解決資源（比如字體）的跨域權限問題。
當Access-Control-Allow-Origin后面跟URL 或 *，如果是 URL 則只會允許來自該 URL 的請求，* 則允許任何域的請求
例如：header('Access-Control-Allow-Origin:http://A.abc.com')||header('Access-Control-Allow-Origin:*')
意思是說只有當你請求的資源被允許跨域的時候才可以被訪問。
那么我們該怎么設置Access-Control-Allow-Origin呢？
帶着這個問題我么能繼續我們的教程
為了解決跨域問題我們要自定義一個CrossSite的屬性
在項目根目錄新建一個類
內容如下：
1 using System.Web;
2 using System.Web.Http.Filters;
3 using System.Web.Mvc;
4
5 namespace APIApplication
6 {
7 public class CrossSiteAttribute : System.Web.Http.Filters.ActionFilterAttribute
8 {
9 private const string Origin = "Origin";
10 /// <summary>
11 /// Access-Control-Allow-Origin是HTML5中定義的一種服務器端返回Response header，用來解決資源（比如字體）的跨域權限問題。
12 /// </summary>
13 private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin" ;
14 /// <summary>
15 /// originHeaderdefault的值可以使 URL 或 *，如果是 URL 則只會允許來自該 URL 的請求，* 則允許任何域的請求
16 /// </summary>
17 private const string originHeaderdefault = "http://192.168.13.7:8002" ;
18 /// <summary>
19 /// 該方法允許api支持跨域調用
20 /// </summary>
21 /// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 類的新實例。</param>
22 public override void OnActionExecuted( HttpActionExecutedContext actionExecutedContext)
23 {
24 actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
25 }
26 }
27 }
然后我們可以在EmployeesController中添加[CrossSite]屬性
用法是這樣的：
1 [CrossSite]
2 public IEnumerable<Employees > Get(int ? id = null )
3 {
4 return from employee in emps where employee.Id.Equals(id) || string.IsNullOrEmpty(Convert .ToString(id)) select employee;
5 }
然后重新生成解決方案，運行后可以看到剛才的警告框的數據了。
前端的調用已經結束了，下面讓我們看看后端是如何調用的吧。
在MVC項目里的Models里我們需要一個實體模型用來讀取或設置數據
新建類命名為v_employees
1 public class v_employees
2 {
3 public int? id { get; set; }
4 public int? departmentid { get; set; }
5 public string name { get; set; }
6 public string job { get; set; }
7 public string gender { get; set; }
8 public string phonenum { get; set; }
9 public string emailadderss { get; set; }
10 public string address { get; set; }
11 }
后端我采用的是HttpClient
具體用法如下：
1 private HttpClient client = new HttpClient ();
2 private string url = "http://192.168.13.7:8001/api/employees/get" ;
3
4 public async Task< ActionResult> Index()
5 {
6 ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
7
8 var data = await client.GetAsync(url);
9 var employees = data.Content.ReadAsAsync<IEnumerable <v_employees >>();
10 List< v_employees> emps = employees.Result.ToList();
11 ViewData[ "employees"] = emps;
12 return View();
13 }
然后在Index頁面設置ViewData
在頁面里就可以直接使用數據emps了
1 @foreach ( var item in emps)
2 {
3 <ul >
4 <li >@ item.name</ li>
5 <li >@ item.gender</li >
6 <li >@ item.address</li >
7 </ul >
8 }
運行后的效果如下：
未完待續。
本教程會持續更新。