web端跨域調用webapi

在做Web開發中，常常會遇到跨域的問題，到目前為止，已經有非常多的跨域解決方案。

通過自己的研究以及在網上看了一些大神的博客，寫了一個Demo

首先新建一個webapi的程序，如下圖所示：

由於微軟已經給我們搭建好了webapi的環境，所以我們不必去添加引用一些dll，直接開始寫代碼吧。

 

因為這只是做一個簡單的Demo，並沒有連接數據庫。

第一步我們要在Models文件夾里添加一個實體類Employees,用來存放數據。

Employees.cs里的內容如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace APIApplication.Models
{
    public class Employees
    {
        public int? Id { get; set; }
        public int? DepartmentId { get; set; }
        public string Name { get; set; }
        public string Job { get; set; }
        public string Gender { get; set; }
        public string PhoneNum { get; set; }
        public string EmailAdderss { get; set; }
        public string Address { get; set; }
    }
}

添加完實體類之后我們的重頭戲即將開始，那就是controller

接着我們在Controller文件夾下新建一個控制器，取名叫EmployeesController

注意在添加控制器的時候要選擇空API控制器模板

如圖所示：

在控制器里我們要添加如下代碼：

在添加代碼之前我們要添加引用： using  APIApplication.Models;

static List< Employees> emps;
        static EmployeesController()
        {
            emps = new List< Employees>();
            emps.Add( new Employees { Id = 1, DepartmentId = 1, Name = "張三", Gender = "男" , Job = "ASP.NET工程師" , PhoneNum = "1886                       0922483", EmailAdderss = "[e-mail]" , Address = "江蘇省蘇州市獨墅湖大道228號" });
            emps.Add( new Employees { Id = 2, DepartmentId = 2, Name = "李四", Gender = "女" , Job = "web前端工程師" , PhoneNum = "1886                       0922483", EmailAdderss = "[e-mail]" , Address = "江蘇省蘇州市獨墅湖大道228號" });
        }

這段代碼的作用就是往實體Employees類里存儲數據。這里我只添加了兩條數據僅供大家參考。

 

接下來我們要實現CRUD功能：

public IEnumerable <Employees > Get(int ? id = null )
        {
            return from employee in emps where employee.Id.Equals(id) || string.IsNullOrEmpty(Convert .ToString(id)) select employee;
        }
        public void Post( Employees employee)
        {
            employee.Id = 3;
            emps.Add(employee);
        }
        public void Put( Employees employee)
        {
            emps.Remove(emps.Where(e => e.Id == employee.Id).First());
            emps.Add(employee);
        }
        public void Delete( int id)
        {
            emps.Remove(emps.Where(e => e.Id == id).FirstOrDefault());
        }

在這里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

我們只需要寫如下代碼就可以了：

<script>
    $(document).ready( function () {
        $.ajax({
            type: 'GET',
            url: 'http://localhost:7974/api/employees/get',
            dataType: 'JSON',
            success: function (data) {
                alert( "姓名：" + data[0].Name + " 性別：" + data[0].Gender + " 住址：" + data[0].Address);
            }
        });
    })

這里的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的屬性

在項目根目錄新建一個類

內容如下：

using System.Web;
using System.Web.Http.Filters;
using System.Web.Mvc;

namespace APIApplication
{
    public class CrossSiteAttribute : System.Web.Http.Filters.ActionFilterAttribute
    {
        private const string Origin = "Origin";
        /// <summary>
        /// Access-Control-Allow-Origin是HTML5中定義的一種服務器端返回Response header，用來解決資源（比如字體）的跨域權限問題。
        /// </summary>
        private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin" ;
        /// <summary>
        ///  originHeaderdefault的值可以使 URL 或 *，如果是 URL 則只會允許來自該 URL 的請求，* 則允許任何域的請求
        /// </summary>
        private const string originHeaderdefault = "http://192.168.13.7:8002" ;
        /// <summary>
        /// 該方法允許api支持跨域調用
        /// </summary>
        /// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 類的新實例。</param>
        public override void OnActionExecuted( HttpActionExecutedContext actionExecutedContext)
        {
            actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
        }
    }
}

然后我們可以在EmployeesController中添加 [ CrossSite ]屬性

用法是這樣的：

[CrossSite]
 public IEnumerable<Employees > Get(int ? id = null )
 {
   return from employee in emps where employee.Id.Equals(id) || string.IsNullOrEmpty(Convert .ToString(id)) select employee;
 }

然后重新生成解決方案，運行后可以看到剛才的警告框的數據了。

 

前端的調用已經結束了，下面讓我們看看后端是如何調用的吧。

在MVC項目里的Models里我們需要一個實體模型用來讀取或設置數據

新建類命名為v_employees

public class v_employees
    {
        public int? id { get; set; }
        public int? departmentid { get; set; }
        public string name { get; set; }
        public string job { get; set; }
        public string gender { get; set; }
        public string phonenum { get; set; }
        public string emailadderss { get; set; }
        public string address { get; set; }
    }

后端我采用的是HttpClient

具體用法如下：

        private HttpClient client = new HttpClient ();
        private string url = "http://192.168.13.7:8001/api/employees/get" ;

        public async Task< ActionResult> Index()
        {
            ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

            var data = await client.GetAsync(url);
            var employees = data.Content.ReadAsAsync<IEnumerable <v_employees >>();
            List< v_employees> emps = employees.Result.ToList();           
            ViewData[ "employees"] = emps;
            return View();
        }

然后在Index頁面設置ViewData

在頁面里就可以直接使用數據emps了

@foreach ( var item in emps)
{
    <ul >
        <li >@ item.name</ li>
        <li >@ item.gender</li >
        <li >@ item.address</li >
    </ul >
}

運行后的效果如下：

未完待續。

本教程會持續更新。