第四節：跨域請求的解決方案和WebApi特有的處理方式

時間  2019-11-10
標籤 第四 請求 解決 方案 webapi 特有 處理 方式 简体版
原文   原文鏈接

一. 簡介前端

前言： 跨域問題發生在Javascript發起Ajax調用，其根本緣由是由於瀏覽器對於這種請求，所給予的權限是較低的，一般只容許調用本域中的資源， 除非目標服務器明確地告知它容許跨域調用。假設咱們頁面或者應用已在 http://www.test1.com 上了，而咱們打算從 http://www.test2.com 請求提取數據。 通常狀況下，若是咱們直接使用 Ajax 來請求將會失敗，瀏覽器也會返回「源不匹配」的錯誤，"跨域"也就以此由來。 web

　　本節將結合MVC和WebApi兩套框架介紹通用的跨域請求的解決方案、WebApi特有的解決方案、幾種JSONP模式、以及如何讓WebApi也支持JSONP的改造方案。ajax

　　下面列舉幾種跨域的狀況：json

 

二.  Mvc和WebApi通用的模式api

　　該模式是MVC和WebApi通用的一種處理模式，簡單便捷，不須要額外添加多餘的程序集，只須要在WebConfig中進行配置一下便可。跨域

　　同時缺點也比較明顯，那就是隻能全局配置，配置完後，全部的控制器下的方法都支持跨域了。瀏覽器

1. 代碼配置以下，在 <system.webServer></system.webServer>節點的 最頂 添加以下代碼：服務器

PS：分析下面代碼mvc

　　A. Access-Control-Allow-Origin ：表明請求地址，如：" http://localhost:2131, http://localhost:2133" 多個地址之間用逗號隔開，*  表明運行全部app

　　B. Access-Control-Allow-headers： 表明表頭

　　C. Access-Control-Allow-method: 表明請求方法。如："GET,PUT,POST,DELETE"

  <system.webServer>
    <!--容許跨域請求的配置  WebApi和MVC通用-->
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Access-Control-Allow-Origin, AppKey, Authorization" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
        <add name="Access-Control-Request-Methods" value="GET, POST, OPTIONS" />
      </customHeaders>
    </httpProtocol>
    <!--容許跨域請求的配置  WebApi和MVC通用   至此結束-->
    <modules>
      <remove name="TelemetryCorrelationHttpModule" />
      <add name="TelemetryCorrelationHttpModule" type="Microsoft.AspNet.TelemetryCorrelation.TelemetryCorrelationHttpModule, Microsoft.AspNet.TelemetryCorrelation" preCondition="integratedMode,managedHandler" />
      <remove name="ApplicationInsightsWebTracking" />
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler" />
    </modules>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
  </system.webServer>

2.  分別在MVC和WebApi下的FifthController和CorsController中新建GetUserName方法，代碼以下：

 1         /// <summary>
 2         /// 方案一的測試接口
 3         /// http://localhost:2131/api/Fifth/GetUserName?userName=admin
 4         /// </summary>
 5         /// <param name="userName"></param>
 6         /// <returns></returns>
 7         [HttpGet]
 8         public string GetUserName(string userName)
 9         {
10             return $"WebApi：userName的值爲{userName}";
11         }    
12         /// <summary>
13         /// 方案一的測試接口
14         /// http://localhost:1912/CorsTest/GetUserName
15         /// </summary>
16         /// <param name="userName"></param>
17         /// <returns></returns>
18         [HttpGet]
19         public string GetUserName(string userName)
20         {
21             return $"MVC：userName的值爲{userName}";
22         }

3. 在一個新項目中進行跨域調用：

1   //1. WebApi
2  $.get("http://localhost:2131/api/Fifth/GetUserName", { userName: "admin" }, function (data) {
3      console.log(data);
4  });
5  //2. MVC
6   $.get("http://localhost:1912/CorsTest/GetUserName", { userName: "admin" }, function (data) {
7      console.log(data);
8  });

註釋掉webconfig中的代碼配置結果以下：

配置後的結果以下：

 

三. WebApi特有的處理方式

　　該模式和上述通用的模式相比較， 最大的好處就是比較靈活，既能夠做用於全局，也能夠特性的形式做用於Controller，或者直接做用於Action。

　　該方案的前提：先經過Nuget添加【Microsoft.AspNet.WebApi.Cors】程序集。

　　核心方法：EnableCorsAttribute(string origins, string headers, string methods)

　　* 表明容許全部。

　　A.origins表明請求地址：" http://localhost:2131, http://localhost:2133" 多個地址之間用逗號隔開

　　B.headers表明表頭：

　　C.method表明請求方法："GET,PUT,POST,DELETE"

1. 做用於全局

　　在WebApiConfig類中的Register方法中添加：config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

2. 做用於Controller

　　(1). 在WebApiConfig類中的Register方法中添加：config.EnableCors();

　　(2). 在FifthController控制器上添加特性：[EnableCors("*", "*", "*")]

3. 做用於Action

　　(1). 在WebApiConfig類中的Register方法中添加：config.EnableCors();

　　(2). 在GetUserName2方法上添加特性：[EnableCors("*", "*", "*")]

部分代碼以下圖：

代碼測試：分別進行上面1,2,3的代碼配置，測試三次，結果以下，均實現了跨域。

1   $.get("http://localhost:2131/api/Fifth/GetUserName2", { userName: "admin" }, function (data) {
2      console.log(data);
3   });

結果：

 

 

四. MVC下JSONP的幾種寫法

 1. JSON和JSONP的區別

① json格式：
 {
　　"id":123,
　　"name":"ypf"
 }
② jsonp格式：在json外面包了一層
callback({
　　"id":123,
　　"name":"ypf"
 })
其中callback取決於url傳到後臺是什麼,他就叫什麼

2. 利用Jquery實現JSONP

注意前端的兩個參數： dataType: "jsonp", jsonp: "myCallBack", 其中myCallBack須要和服務端回掉方法中的參數名相對應，註釋掉這句話默認傳的名稱叫callback

後臺要有一個參數來接受這個包裹的名稱，而後用它把最後的返回值包裹起來以string的形式返回給客戶端，注：數據要進行序列化。

這種方式有個明顯缺點：假設有一天這個接口不須要跨域，要改會普通請求的普通返回形式, 則須要改代碼，就哭了，並且每一個接口都要這麼對應去寫跨域的寫法，侵入性太強。

服務器端代碼分享：

 1        /// <summary>
 2         /// 方案三：MVC默認支持JSONP
 3         /// 但須要服務器端有相似callback參數接受的，而後對返回值進行拼接
 4         /// </summary>
 5         /// <param name="callBack"></param>
 6         /// <param name="userName"></param>
 7         /// <returns></returns>
 8         [HttpGet]
 9         public dynamic GetInfor(string myCallBack, string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18             return Content($"{myCallBack}({xjs})");
19 
20             //或者直接返回字符串
21             //return $"{myCallBack}({xjs})";
22         }

JS調用代碼分享：

 1  　　　　　　　　$.ajax({
 2                     url: 'http://localhost:1912/CorsTest/GetInfor',
 3                     type: "get",
 4                     dataType: "jsonp",
 5                     //須要和服務端回掉方法中的參數名相對應
 6                     //註釋掉這句話默認傳的名稱叫callback
 7                     jsonp: "myCallBack",   
 8                     cache: false,
 9                     data: { userName: "ypf" },
10                     success: function (data) {
11                         console.log(data);
12                         console.log(data.id);
13                         console.log(data.userName);
14                     }
15                 });

結果：

3. 思考：MVC下可否也面向切面的形式實現跨域？

效果：①方法依然常規寫法不須要特地的用跨域的寫法 ②哪一個方法想支持跨域，哪一個方法不想支持能靈活的控制，不要去改方法內部的代碼。③跨域調用和非跨域調用都能調用

思路1：利用過濾器以特性的形式進行做用，同時過濾器內實現方案一中的代碼，詳見MvcCors過濾器和GetInfor2方法

過濾器代碼

 1  public class MvcCors:ActionFilterAttribute
 2     {
 3         /// <summary>
 4         /// 方法執行後執行
 5         /// </summary>
 6         /// <param name="filterContext"></param>
 7         public override void OnActionExecuted(ActionExecutedContext filterContext)
 8         {
 9             HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Origin", "*");
10             HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Headers", "x-requested-with,content-type,requesttype,Token");
11             HttpContext.Current.Response.Headers.Add("Access-Control-Allow-Methods", "POST,GET");
12         }
13     }

GetInfor2方法

 1       /// <summary>
 2         /// 方案三：本身利用方案一中的原理進行改造
 3         /// 讓方法靈活的支持跨域
 4         /// </summary>
 5         /// <param name="userName"></param>
 6         /// <returns></returns>
 7         [MvcCors]
 8         [HttpGet]
 9         public string GetInfor2(string userName)
10         {
11             return $"MVC：userName的值爲{userName}";
12         }

JS代碼

1   $.get("http://localhost:1912/CorsTest/GetInfor2", { userName: "admin" }, function (data) {
2      console.log(data);
3   });

調用結果

 

思路2：利用過濾器以特性的形式進行做用，同時過濾器中進行判斷該調用是否屬於跨域，屬於的話就對返回值進行跨域的包裹返回，不屬於的話，原樣返回。(MVC版暫未實現，WebApi版詳見下面)

繼續思考：重寫ContentResult，在重寫裏面判斷，若是屬於跨域請求，返回值進行跨域的返回，若是不是跨域請求，正常返回 (暫未實現)

 

五. WebApi下JSONP的改造

前言：WebApi默認不支持JSONP, 這裏咱們須要對其進行改造

測試不支持的代碼

 1  /// <summary>
 2         /// 原始的JSONP模式，返現不支持
 3         /// </summary>
 4         /// <param name="callBack"></param>
 5         /// <param name="userName"></param>
 6         /// <returns></returns>
 7         [HttpGet]
 8 
 9         public dynamic GetInfor(string myCallBack, string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18 
19             return $"{myCallBack}({xjs})";
20         }
View Code 
 1           $.ajax({
 2                     url: 'http://localhost:1912/CorsTest/GetInfor3',
 3                     type: "get",
 4                     dataType: "jsonp",
 5                     //須要和服務端回掉方法中的參數名相對應
 6                     //註釋掉這句話默認傳的名稱叫callback
 7                     jsonp: "myCallBack",
 8                     cache: false,
 9                     data: { userName: "ypf" },
10                     success: function (data) {
11                         console.log(data);
12                         console.log(data.id);
13                         console.log(data.userName);
14                     }
15                 });
View Code

改造一：

a. 經過Nuget安裝程序集：WebApiContrib.Formatting.Jsonp.

b. 在Global文件中進行配置

//容許JSON的配置(注意前端傳過來的名字必需要爲myCallBack)

GlobalConfiguration.Configuration.AddJsonpFormatter(GlobalConfiguration.Configuration.Formatters.JsonForma‌​tter, "myCallBack");

服務器端代碼：

 1         /// <summary>
 2         /// 方案四：利用WebApiContrib.Formatting.Jsonp程序集改造支持跨域
 3         /// </summary>
 4         /// <param name="callBack"></param>
 5         /// <param name="userName"></param>
 6         /// <returns></returns>
 7         [HttpGet]
 8 
 9         public dynamic GetInfor2(string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18             return $"{xjs}";
19         }

前端JS代碼：

         $.ajax({
                    url: 'http://localhost:2131/api/Fifth/GetInfor2',
                    type: "get",
                    dataType: "jsonp",
                    //須要和服務端回掉方法中的參數名相對應
                    //註釋掉這句話默認傳的名稱叫callback
                    jsonp: "myCallBack",
                    cache: false,
                    data: { userName: "ypf" },
                    success: function (data) {
                        console.log(data);
                        var jdata = JSON.parse(data);
                        console.log(jdata.id);
                        console.log(jdata.userName);
                    }
                });

測試結果： 

改造二：

　　利用上述MVC中的思路：利用過濾器以特性的形式進行做用，同時過濾器中進行判斷該調用是否屬於跨域，屬於的話就對返回值進行跨域的包裹返回，不屬於的話，原樣返回。

過濾器代碼：

 1  public class JsonCallbackAttribute:ActionFilterAttribute
 2     {
 3         private const string CallbackQueryParameter = "myCallBack";
 4         public override void OnActionExecuted(HttpActionExecutedContext context)
 5         {
 6             var callback = string.Empty;
 7             if (IsJsonp(out callback))
 8             {
 9                 var jsonBuilder = new StringBuilder(callback);
10                 //將數據包裹jsonp的形式進行返回
11                 jsonBuilder.AppendFormat("({0})", context.Response.Content.ReadAsStringAsync().Result);
12                 context.Response.Content = new StringContent(jsonBuilder.ToString());
13             }
14 
15             base.OnActionExecuted(context);
16         }
17 
18         private bool IsJsonp(out string callback)
19         {
20             callback = HttpContext.Current.Request.QueryString[CallbackQueryParameter];
21             return !string.IsNullOrEmpty(callback);
22         }
23     }

服務端代碼：

 1         /// <summary>
 2         /// 方案四(改造二)：利用過濾器以特性的形式進行做用，同時過濾器中進行判斷該調用是否屬於跨域，
 3         /// 屬於的話就對返回值進行跨域的包裹返回，不屬於的話，原樣返回。
 4         /// </summary>
 5         /// <param name="callBack"></param>
 6         /// <param name="userName"></param>
 7         /// <returns></returns>
 8         [HttpGet]
 9         [JsonCallback]
10 
11         public dynamic GetInfor3(string userName)
12         {
13             var data = new
14             {
15                 id = userName + "001",
16                 userName = userName
17             };
18             JavaScriptSerializer js = new JavaScriptSerializer();
19             string xjs = js.Serialize(data);
20             return $"{xjs}";
21         }

js調用代碼：

 1           $.ajax({
 2                     url: 'http://localhost:2131/api/Fifth/GetInfor3',
 3                     type: "get",
 4                     dataType: "jsonp",
 5                     //須要和服務端回掉方法中的參數名相對應
 6                     //註釋掉這句話默認傳的名稱叫callback
 7                     jsonp: "myCallBack",
 8                     cache: false,
 9                     data: { userName: "ypf" },
10                     success: function (data) {
11                         console.log(data);
12                         var jdata = JSON.parse(data);
13                         console.log(jdata.id);
14                         console.log(jdata.userName);
15                     }
16                 });

結果返回：

 

六. 其它

　　webSocket 和signalr也是一種跨域方式，mvc下能夠利用script標籤實現跨域。 

分享MVC下利用Script標籤實現跨域

服務器端代碼

 1         // <summary>
 2         /// 擴展：
 3         /// 利用script標籤實現JSONP的跨域
 4         /// 但須要服務器端有相似callback參數接受的，而後對返回值進行拼接
 5         /// </summary>
 6         /// <param name="callBack"></param>
 7         /// <param name="userName"></param>
 8         /// <returns></returns>
 9         public ActionResult GetInfor4(string callBack, string userName)
10         {
11             var data = new
12             {
13                 id = userName + "001",
14                 userName = userName
15             };
16             JavaScriptSerializer js = new JavaScriptSerializer();
17             string xjs = js.Serialize(data);
18             return Content($"{callBack}({xjs})");
19 
20             //或者直接返回字符串
21             //return $"{callback}({xjs})";
22         }

前端js代碼

 1  //1. 原始寫法
 2   $('<script/>').attr('src', 'http://localhost:1912/CorsTest/GetInfor4?callBack=myCallBack&userName=ypf').appendTo("body")
 3   //2. 封裝寫法
 4   CrossData('http://localhost:1912/CorsTest/GetInfor4', { userName: "ypf" }, 'myCallBack');
 5 
 6 
 7 　　　　　//回調方法
 8         function myCallBack(data) {
 9             console.log(data);
10             console.log(data.id);
11             console.log(data.userName);
12         }
13         //封裝跨域方法
14         function CrossData(url, data, callBackMethord) {
15             var queryStr = '?';
16             for (var key in data) {
17                 queryStr += key + '=' + data[key] + '&'
18             }
19             var newUrl = url + queryStr + 'callBack=' + callBackMethord;
20             $('<script/>').attr('src', newUrl).appendTo("body");
21         }

 

 

 

 

!

  • 做       者 : Yaopengfei(姚鵬飛)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 聲     明1 : 本人才疏學淺，用郭德綱的話說「我是一個小學生」，若有錯誤，歡迎討論，請勿謾罵^_^。
  • 聲     明2 : 原創博客請在轉載時保留原文連接或在文章開頭加上本人博客地址，不然保留追究法律責任的權利。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程