本文主要介紹了ASP.Net WebAPI與Ajax進行跨域數據交互時Cookies數據傳遞的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧

前言

最近公司項目進行架構調整，由原來的三層架構改進升級到微服務架構(準確的說是服務化，還沒完全做到微的程度，顆粒度沒那么細)，遵循RESTFull規范，使前后端完全分離，實現大前端思想。由于是初次嘗試，中途也遇到了不少問題。今天就來討論一下其中之一的問題，WebAPI與前端Ajax 進行跨域數據交互時，由于都在不同的二級域名下(一級域名相同)，導致Cookies數據無法獲取。

最開始通過頭部(Header)將Cookies傳輸到其WebAPI，也能解決問題。

下面講述另外一種解決方案。

解決過程：

步驟一：將Cookies的Domain(域)設置成一級域名，例如：“.wbl.com”(a.wbl.com域名下)

這是前提，此時在其中一個WebAPI中設置了Cookies后，用瀏覽器直接訪問其它的WebAPI是可以獲取到Cookies的。例如：a.wbl.com域名下設置的Cookies，用瀏覽器直接訪問b.wbl.com域名的WebAPI是可以獲取到Cookies的。但是用c.web.com域名下的Ajax訪問b.wbl.com時，就無法獲取到Cookies了，這是由于瀏覽器中Ajax的權限相對較低，Ajax無法跨域問題導致。

寫入Cookies代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/// <summary> ??/// 給指定的 Cookies 賦值 ??/// </summary> ??/// <param name="cookKey">Cookies 名稱</param> ??/// <param name="value">Cookies 值</param> ??/// <param name="domain">設置與此 Cookies 關聯的域(如：“.tpy100.com”)(可以使該域名下的二級域名訪問)</param> ??public?static?void?SetCookiesValue(string?cookKey,?string?value,?string?domain) ??{ ???HttpCookie cookie =?new?HttpCookie(cookKey); ???cookie.Value = value; ???cookie.HttpOnly =?true; ???if?(!string.IsNullOrEmpty(domain) && domain.Length > 0) ????cookie.Domain = domain; ???HttpContext.Current.Response.Cookies.Add(cookie); ??}

步驟二：JQuery中Ajax使用Jsonp數據類型解決跨域問題(c.wbl.com域名下)

前后端需要定義統一的回調(Callback)函數名。

前端Ajax代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

// 設置Cookies ??function?set() { ???var?url =?"http://a.wbl.com/api/setvalue/888888"; ???$.ajax({ ????type:?"get", ????url: url, ????dataType:?"jsonp", ????jsonp:?"callbackparam",?//服務端用于接收callback調用的function名的參數 ????jsonpCallback:?"success_jsonpCallback",?//callback的function名稱 ????success:?function?(json) { ?????console.log(json); ?????alert(json); ????}, ????error:?function?() { ?????alert('fail'); ????} ???}); ??} ??// 獲取Cookies ??function?get() { ???var?url =?"http://b.wbl.com/api/getvalue"; ???$.ajax({ ????type:?"get", ????url: url, ????dataType:?"jsonp", ????jsonp:?"callbackparam",?//服務端用于接收callback調用的function名的參數 ????jsonpCallback:?"success_jsonpCallback",?//callback的function名稱 ????success:?function?(json) { ?????console.log(json); ?????alert(json); ????}, ????error:?function?() { ?????alert('fail'); ????} ???}); ??}

步驟三：WebAPI中返回jsonp數據類型

Jsonp格式：

success_jsonpCallback({“Cookies”:”888888”})

由于這種格式與json格式有所不同，只用WebAPI里的返回IHttpActionResult或HttpRequestMessage類型不行，最后通過流的方式輸出才實現了這個格式。

WebAPI代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

[Route("api/GetValue")] ??[HttpGet] ??public?void?GetValue() ??{ ???string?ccc = MyTools.Request.GetString("callbackparam"); ???var?a =?new?{ name =?"Cookies", value = MyTools.Cookies.GetCookiesValue("name") }; ???string?result = ccc +?"({\"Cookies\":\""?+ MyTools.Cookies.GetCookiesValue("name") +?"\"})"; ???//var response = Request.CreateResponse(HttpStatusCode.OK); ???//response.Content = new StringContent(result, Encoding.UTF8); ???HttpContext.Current.Response.Write(result); ???HttpContext.Current.Response.End(); ???// return response; ??} ??[Route("api/SetValue/{id}")] ??[HttpGet] ??public?void?SetValue(int?id) ??{ ???//string domain = ""; ???string?domain =?".wbl.com"; ???MyTools.Cookies.ClearCookies("name", domain); ???MyTools.Cookies.SetCookiesValue("name", id.ToString(), domain); ???string?ccc = MyTools.Request.GetString("callbackparam"); ???string?result = ccc +?"({\"result\":\"設置成功\"})"; ???HttpContext.Current.Response.Write(result); ???HttpContext.Current.Response.End(); ??}

最終效果：

后言：

這只是解決這個問題的一種方法。百度后還有一種通過第三方插件(Cross-Origin、Help Page)來處理的，后續在進行實驗。

總結

以上是生活随笔為你收集整理的ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递的全部內容，希望文章能夠幫你解決所遇到的問題。

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