前言
最近公司項(xiàng)目進(jìn)行架構(gòu)調(diào)整，由原來的三層架構(gòu)改進(jìn)升級到微服務(wù)架構(gòu)（準(zhǔn)確的說是服務(wù)化，還沒完全做到微的程度，顆粒度沒那么細(xì)），遵循RESTFull規(guī)范，使前后端完全分離，實(shí)現(xiàn)大前端思想。由于是初次嘗試，中途也遇到了不少問題。今天就來討論一下其中之一的問題，WebAPI與前端Ajax 進(jìn)行跨域數(shù)據(jù)交互時(shí)，由于都在不同的二級域名下（一級域名相同），導(dǎo)致Cookies數(shù)據(jù)無法獲取。
最開始通過頭部（Header）將Cookies傳輸?shù)狡鋀ebAPI，也能解決問題。
下面講述另外一種解決方案。
解決過程：
步驟一：將Cookies的Domain（域）設(shè)置成一級域名，例如：“.wbl.com”（a.wbl.com域名下）
這是前提，此時(shí)在其中一個(gè)WebAPI中設(shè)置了Cookies后，用瀏覽器直接訪問其它的WebAPI是可以獲取到Cookies的。例如：a.wbl.com域名下設(shè)置的Cookies，用瀏覽器直接訪問b.wbl.com域名的WebAPI是可以獲取到Cookies的。但是用c.web.com域名下的Ajax訪問b.wbl.com時(shí)，就無法獲取到Cookies了，這是由于瀏覽器中Ajax的權(quán)限相對較低，Ajax無法跨域問題導(dǎo)致。
寫入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">設(shè)置與此 Cookies 關(guān)聯(lián)的域（如：“.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數(shù)據(jù)類型解決跨域問題（c.wbl.com域名下）
前后端需要定義統(tǒng)一的回調(diào)（Callback）函數(shù)名。
前端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
|
// 設(shè)置Cookies function set() { var url = "http://a.wbl.com/api/setvalue/888888"; $.ajax({ type: "get", url: url, dataType: "jsonp", jsonp: "callbackparam", //服務(wù)端用于接收callback調(diào)用的function名的參數(shù) 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", //服務(wù)端用于接收callback調(diào)用的function名的參數(shù) jsonpCallback: "success_jsonpCallback", //callback的function名稱 success: function (json) { console.log(json); alert(json); }, error: function () { alert('fail'); } }); } |
步驟三：WebAPI中返回jsonp數(shù)據(jù)類型
Jsonp格式：
success_jsonpCallback({“Cookies”:”888888”})
由于這種格式與json格式有所不同，只用WebAPI里的返回IHttpActionResult或HttpRequestMessage類型不行，最后通過流的方式輸出才實(shí)現(xiàn)了這個(gè)格式。
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\":\"設(shè)置成功\"})"; HttpContext.Current.Response.Write(result); HttpContext.Current.Response.End(); } |
最終效果：
后言：
這只是解決這個(gè)問題的一種方法。百度后還有一種通過第三方插件（Cross-Origin、Help Page）來處理的，后續(xù)在進(jìn)行實(shí)驗(yàn)。各位路過的大神如有更好的方法，望不要吝嗇，請賜教！菜鳥感激不盡！
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持服務(wù)器之家！
原文鏈接：http://www.cnblogs.com/wbl168/p/6870059.html
