本文主要介紹了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中文網其他相關文章！
