web api 初體驗 解決js調用跨域問題

跨域界定

常見跨域：

同IP不同端口： http:IP:8001/api/user     http:IP:8002/api/user 

不同IP不同端口： http://172.28.20.100:8001/api/user    http://172.128.20.100:8002/api/user 

 

基本介紹

 web api出現的時間也不短了，一直沒機會運用，很多公司還是用的wcf 和webservice.目前常用的web api場景是一個接口多平台調用，例如給安卓調用 給ios調用 給平板調用 主要為移動互聯網提供服務，web api雖然可以脫離iis自寄宿 但目前大多還是托管在IIS上的。

調用方式

  1. 后台調用

  

      var httpClient = new HttpClient();
            var responseJson = httpClient.GetAsync("http://172.28.20.106:8002/api/products/3")
               .Result.Content.ReadAsStringAsync().Result;       
               Console.WriteLine(responseJson);
            //就這么簡單的幾行代碼可以獲得產品ID為3的對象 這是Get請求

目前使用最多的就是在手機端后台調用的方式來進行。但是在web網站端我們並不滿足於后台調用 我們習慣前台用ajax調用

2.前台調用

 $.ajax({
            type: "GET",
            url: "http://172.28.20.106:8002/api/products/3",
            dataType: "xml",
            contentType: 'application/xml;charset=gb2312;'
        }).success(function (res) {
            console.log(res);
        }).error(function (xhr, status) {
            console.log(xhr);
        });

這樣寫絕對報錯，會提示跨域調用錯誤

解決辦法好幾個 我采用cors的方式

步驟1：在api服務端添加引用 使用Nuget包聯機安裝

引用它是要用到 System.web.Http.Cors.dll這個文件

  控制跨域的訪問權限有3種

 1.限定方法

 2.限定類（controller）

 3.全局 

 

我們直接使用簡單粗暴的全局訪問

  在app_start文件夾下面有個WebApiconfig.cs文件,在里面加上2句代碼就 可以了

var cors = new EnableCorsAttribute("*", "*", "*");//第一個參數是指定的域（www.baidu.com 多個域可以以","分隔）
config.EnableCors(cors);

圖片如下

簡單的幾個步驟就解決了跨域問題，之前難倒了我2天，就為了使用ajax調用webapi

學習資料

關於webapi的使用步驟 官方有詳細的教程 還有必應直接翻譯成中文，雖然翻譯的語句不通，比小學作文還爛，但比看英文好太多，誰叫咱英文爛呢 

官方地址