HTTPS环境下MVC项目C#生成Cookie后JS无法读取的问题

我在C#中生成了名为sRoller的Cookie，尝试在页面加载时通过jQuery在ascx文件中读取它。网站运行在HTTPS环境下，本次仅关注ascx部分。

C#生成Cookie的代码 #

private void UpdateSessionTimerCookie(bool? loggedIn = true)
{
    #region Not Logged in? Return nothing
    var isLoggedIn = loggedIn ?? false;
    if (!isLoggedIn) { return; }
    #endregion

    const string cookieName      = "sRoller";

    #region Delete the cookie if it already exists
    if (Request.Cookies.Exists(cookieName) && Request.Cookies[cookieName] != null)
    {
        Response.Cookies.Remove(cookieName);
        Request.Cookies.Remove(cookieName);
    }
    #endregion

    #region Build the new cookie (reset of timer)
    var cookie = new HttpCookie(cookieName)
    {
        HttpOnly  = false,
        SameSite  = SameSiteMode.Lax,
        Expires   = DateTime.Now.AddMinutes(HttpContext.Session.Timeout),
        Value     = DateTime.Now.ToString(),
        Path      = "/",
        Secure    = true,
        Shareable = false
    };

    Response.Cookies.Add(cookie);
    Response.SetCookie(cookie);
    #endregion
}

ascx中读取Cookie的JS代码 #

<script type="text/javascript">
    $(document).ready(function() {
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1);
                if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
            }

            return "";
        }

        var myCookie = getCookie("sRoller");
        //first alert
        alert(myCookie);
    });

    function ShowCookie() {
        var MyCookie = getCookieValue("sRoller");
        //second alert
        alert(MyCookie);
    }

    function getCookieValue(name) {
        var cookieList = document.cookie.split('; ');
        var cookies = {};

        for (var i = cookieList.length - 1; i >= 0; i--) {
            var cookie = cookieList[i].split('=');
            cookies[cookie[0]] = cookie[1];
        }

        return cookies[name];
    }

    ShowCookie();
</script>

现象 #

开发者工具中能看到sRollerCookie存在，但页面加载时第一个alert弹出"undefined"，第二个alert无内容，JS无法正常读取该Cookie。

解决方案 #

• 确认HTTPS协议匹配：Cookie设置了Secure = true，仅在HTTPS下生效，确保当前访问ascx所在页面的协议是HTTPS，HTTP环境下浏览器不会携带该Cookie。
• 调整JS执行时机：ShowCookie()直接在全局作用域执行，此时浏览器可能还未完成Cookie解析。将其移至$(document).ready内部，确保Cookie已加载：

  $(document).ready(function() {
      // 原getCookie函数保留
      var myCookie = getCookie("sRoller");
      alert(myCookie);
  
      // 调用ShowCookie
      ShowCookie();
  });
  
  // 保留ShowCookie和getCookieValue函数
  

• 统一Cookie读取逻辑：两个读取函数的分隔符处理不一致（split(';') vs split('; ')），容易因空格问题读取失败，使用更可靠的读取函数：

  function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
      return '';
  }
  

• 修复C#中重复设置Cookie的问题：同时调用Response.Cookies.Add(cookie)和Response.SetCookie(cookie)可能导致Cookie异常，仅保留其中一个即可，例如删除Response.Cookies.Add(cookie)。
• 验证Cookie路径有效性：确认ascx所在页面的路径在Cookie设置的Path="/"范围内，路径不匹配会导致浏览器不暴露Cookie给当前页面。

内容的提问来源于stack exchange，提问作者PKD