webapi跨域使用session

在以前的項目中,咱們設置跨域都是直接在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 }
            };
        }

結果:

相關文章
相關標籤/搜索