Chrome浏览器无法从Cookie中获取CSRF Token问题求助

可能的原因 #

Chrome 近期强化了 Cookie 的安全策略，核心影响点在于SameSite与Secure属性的默认规则：

• 若站点使用 HTTP 协议（比如本地开发的http://localhost），而 CSRF Cookie 被设置为Secure，Chrome 会直接禁止在非 HTTPS 环境下读取这类 Cookie。
• SameSite=Lax是 Chrome 当前默认的 Cookie 属性，若你的请求场景不符合 Lax 规则（比如跨域 POST 请求），Cookie 不会被携带，自然无法通过document.cookie读取到。

修复方案 #

方案1：调整后端 Cookie 配置 #

在 Django 的settings.py中修改 CSRF Cookie 的相关设置：

# 本地开发环境禁用Secure属性，生产环境建议开启
CSRF_COOKIE_SECURE = False
# 根据请求场景选择SameSite值，跨域场景需设为None（需配合Secure=True）
CSRF_COOKIE_SAMESITE = 'Lax'

如果需要支持跨域请求，同步调整为：

CSRF_COOKIE_SAMESITE = 'None'
CSRF_COOKIE_SECURE = True

方案2：优化前端获取逻辑 #

原代码的字符串匹配存在边缘风险（比如 Cookie 名称大小写差异），改用正则匹配更可靠：

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const regex = new RegExp(`(^|;)\\s*${name}\\s*=\\s*([^;]+)`);
        const match = document.cookie.match(regex);
        if (match) {
            cookieValue = decodeURIComponent(match[2]);
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');

方案3：检查页面执行上下文 #

确保代码在同源页面中执行，Chrome 禁止在 iframe 或跨域脚本中读取非SameSite=None的 Cookie。如果是 iframe 场景，需后端配合设置CSRF_COOKIE_SAMESITE='None'和CSRF_COOKIE_SECURE=True。

验证步骤 #

1. 打开 Chrome 开发者工具（F12），切换到Application标签，查看Cookies目录下是否存在csrftoken。
2. 检查该 Cookie 的SameSite、Secure属性是否匹配当前环境要求。
3. 在控制台执行document.cookie，确认是否能看到csrftoken的内容。

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