Django 3.2本地测试CSRF验证失败及csrftoken不可见问题求助

核心原因分析 #

你的问题本质是本地跨域测试场景下的Cookie访问限制：

• 当客户端和服务器端口/域名不一致时（比如服务器跑在localhost:8000，客户端在localhost:3000），浏览器会判定为跨域请求。
• Django默认的csrftoken Cookie的SameSite属性为Lax，跨域场景下：
  1. 浏览器允许请求携带Cookie（所以你能在请求头里看到csrftoken）；
  2. 但出于安全限制，前端JS无法通过document.cookie读取该Cookie；
• Django的CSRF验证要求请求必须携带X-CSRFToken请求头（值与Cookie中的csrftoken一致），由于你无法读取Cookie，也就无法在请求头中传入该值，最终导致验证失败。

针对性解决方案 #

1. 调整Django的CSRF Cookie配置 #

在settings.py中修改以下参数：

# 允许跨域情况下Cookie被JS读取和携带
CSRF_COOKIE_SAMESITE = 'None'
# 本地测试用http协议时，需关闭Secure（生产环境必须开启，配合https）
CSRF_COOKIE_SECURE = False
# 可选：指定Cookie生效的域名，本地测试可设为'localhost'
CSRF_COOKIE_DOMAIN = 'localhost'

注意：生产环境必须将CSRF_COOKIE_SECURE设为True，且SameSite='None'仅在HTTPS环境下生效。

2. 前端请求配置（关键） #

无论用fetch还是axios，都需要开启携带凭证的配置，确保跨域请求能正确传递Cookie并读取：

• 用fetch时：

fetch('/api/your-endpoint/', {
  method: 'POST',
  credentials: 'include', // 必须加这个
  headers: {
    'X-CSRFToken': getCookie('csrftoken'), // 现在能读取到了
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})

• 用axios时：

axios.defaults.withCredentials = true; // 全局开启
axios.post('/api/your-endpoint/', data, {
  headers: {
    'X-CSRFToken': getCookie('csrftoken')
  }
})

这里的getCookie是自定义函数，用于从document.cookie中提取csrftoken，示例实现：

function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

3. 备选方案：临时同域测试 #

如果只是本地调试，可以让客户端和服务器使用相同端口，比如将前端项目代理到服务器端口，或者直接在Django的static目录下放置前端文件，彻底避免跨域问题。

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