快捷導(dǎo)航

ASP.Net WebAPI與Ajax進(jìn)行跨域數(shù)據(jù)交互時(shí)Cookies數(shù)據(jù)的傳遞

更新時(shí)間：2017年05月18日 08:16:47 作者：myface

本文主要介紹了ASP.Net WebAPI與Ajax進(jìn)行跨域數(shù)據(jù)交互時(shí)Cookies數(shù)據(jù)傳遞的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

前言

最近公司項(xiàng)目進(jìn)行架構(gòu)調(diào)整，由原來(lái)的三層架構(gòu)改進(jìn)升級(jí)到微服務(wù)架構(gòu)（準(zhǔn)確的說(shuō)是服務(wù)化，還沒(méi)完全做到微的程度，顆粒度沒(méi)那么細(xì)），遵循RESTFull規(guī)范，使前后端完全分離，實(shí)現(xiàn)大前端思想。由于是初次嘗試，中途也遇到了不少問(wèn)題。今天就來(lái)討論一下其中之一的問(wèn)題，WebAPI與前端Ajax 進(jìn)行跨域數(shù)據(jù)交互時(shí)，由于都在不同的二級(jí)域名下（一級(jí)域名相同），導(dǎo)致Cookies數(shù)據(jù)無(wú)法獲取。

最開(kāi)始通過(guò)頭部（Header）將Cookies傳輸?shù)狡鋀ebAPI，也能解決問(wèn)題。

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

解決過(guò)程：

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

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

寫(xiě)入Cookies代碼：

/// <summary>
  /// 給指定的 Cookies 賦值
  /// </summary>
  /// <param name="cookKey">Cookies 名稱(chēng)</param>
  /// <param name="value">Cookies 值</param>
  /// <param name="domain">設(shè)置與此 Cookies 關(guān)聯(lián)的域（如：“.tpy100.com”）（可以使該域名下的二級(jí)域名訪問(wèn)）</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ù)類(lèi)型解決跨域問(wèn)題（c.wbl.com域名下）

前后端需要定義統(tǒng)一的回調(diào)（Callback）函數(shù)名。

前端Ajax代碼：

// 設(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名稱(chēng)
    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名稱(chēng)
    success: function (json) {
     console.log(json);
     alert(json);
    },
    error: function () {
     alert('fail');
    }
   });
  }

步驟三：WebAPI中返回jsonp數(shù)據(jù)類(lèi)型

Jsonp格式：

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

由于這種格式與json格式有所不同，只用WebAPI里的返回IHttpActionResult或HttpRequestMessage類(lèi)型不行，最后通過(guò)流的方式輸出才實(shí)現(xiàn)了這個(gè)格式。

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\":\"設(shè)置成功\"})";

   HttpContext.Current.Response.Write(result);
   HttpContext.Current.Response.End();
  }

最終效果：

后言：

這只是解決這個(gè)問(wèn)題的一種方法。百度后還有一種通過(guò)第三方插件（Cross-Origin、Help Page）來(lái)處理的，后續(xù)在進(jìn)行實(shí)驗(yàn)。各位路過(guò)的大神如有更好的方法，望不要吝嗇，請(qǐng)賜教！菜鳥(niǎo)感激不盡！

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: