在以前的項目中,咱們設置跨域都是直接在web.config中設置的。前端
這樣是能夠實現跨域訪問的。由於咱們這邊通常狀況下一個webapi會有多個網站、小程序、微信公衆號等訪問,因此這樣設置是沒有問題的。可是……若是其中一個網站須要用到cookie或者session的時候,jquery
Access-Control-Allow-Origin若是仍是設置成「*」就會報錯,固然是前端報錯。。。數據返回還有cookie/session都仍是能存,可是報錯就不爽了啊。web
因而,想着整改一下。ajax
先上前端代碼。來個頁面遠程ajax請求去設置session。啥都沒有,就是點按鈕,發個請求。標記地方是必須加的json
@{ ViewBag.Title = "TestSetSession"; } <h2>TestSetSession</h2> <button onclick="Set()">設置session</button> @section scripts{ <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script> function Set() { $.ajax({ url: "http://localhost:1338/api/Test/SetSession?session=1234567fdsdfghjhgfds", dataType: "json", xhrFields: { withCredentials: true }, crossDomain: true, data: {}, type: "post", success: function (data) { alert(data.message) }, error: function () { alert('服務器發生錯誤!'); } }); } </script> }
而後再來個頁面,獲取上個頁面設置的session。小程序
@{ ViewBag.Title = "TestGetSession"; } <h2>TestGetSession</h2> <button onclick="Get()">獲取session</button> @section scripts{ <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script> function Get() { $.ajax({ url: "http://localhost:1338/api/Test/GetSession", dataType: "json", xhrFields: { withCredentials: true }, crossDomain: true, data: {}, type: "get", success: function (data) { alert("session:" + data.data.session_state + ",cookie:" + data.data.cookie); }, error: function () { alert('服務器發生錯誤!'); } }); } </script> }
後臺代碼api
1.先容許webapi使用session跨域
在global中加入以下代碼緩存
public override void Init() { PostAuthenticateRequest += MvcApplication_PostAuthenticateRequest; base.Init(); } void MvcApplication_PostAuthenticateRequest(object sender, EventArgs e) { System.Web.HttpContext.Current.SetSessionStateBehavior( System.Web.SessionState.SessionStateBehavior.Required); }
2.容許跨域。我這裏使用的是Microsoft.AspNet.WebApi.Cors服務器
先安裝包,而後在WebApiConfig中加入以下代碼。等同於在web.config中設置
//容許跨域 config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
在請求方法上打上[EnableCors]標籤,特指某一些域名的訪問須要cookie/session
[EnableCors("http://localhost:6477,http://localhost:6478", "*","*")] public class TestController : ApiController { /// <summary> /// 設置session /// </summary> /// <returns></returns> public dynamic SetSession(string session) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true"); //緩存state HttpContext.Current.Session["session_test"] = session; HttpCookie cookie = new HttpCookie("cookie_test") { Value = session, Expires = DateTime.Now.AddHours(1) }; HttpContext.Current.Response.Cookies.Add(cookie); return new { success = true, message = "設置session" }; } /// <summary> /// 獲取session /// </summary> /// <returns></returns> public dynamic GetSession() { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true"); var session = HttpContext.Current.Session["session_test"]; HttpCookie _cookie = HttpContext.Current.Request.Cookies["cookie_test"]; var cookie = _cookie?.Value??""; string session_state = session == null ? "" : session.ToString(); return new { success = true, message = "獲取session", data = new { session_state, cookie } }; }
結果: