本文主要介紹了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程式碼:
/// <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網域下)
前端Ajax程式碼:
// 设置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」})
ActionResult或HttpRequestMessage類型不行,最後透過流的方式輸出才實現了這個格式。
WebAPI程式碼:[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資料的傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章!