一. 簡介

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

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

　　下面列舉幾種跨域的情況：

?

二.? Mvc和WebApi通用的模式

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

　　同時缺點也比較明顯，那就是只能全局配置，配置完后，所有的控制器下的方法都支持跨域了。

1. 代碼配置如下，在?<system.webServer></system.webServer>節點的 最頂 添加如下代碼：

PS：分析下面代碼

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

　　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=admin4 /// </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默認支持JSONP3 /// 但需要服務器端有類似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 //注釋掉這句話默認傳的名稱叫callback7 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:ActionFilterAttribute2 {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 }

1 $.ajax({2 url: 'http://localhost:1912/CorsTest/GetInfor3',3 type: "get",4 dataType: "jsonp",5 //需要和服務端回掉方法中的參數名相對應6 //注釋掉這句話默認傳的名稱叫callback7 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 });

改造一：

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",//需要和服務端回掉方法中的參數名相對應//注釋掉這句話默認傳的名稱叫callbackjsonp: "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:ActionFilterAttribute2 {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 //注釋掉這句話默認傳的名稱叫callback7 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 }

總結

以上是生活随笔為你收集整理的第十八节：跨域请求的解决方案和WebApi特有的处理方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。