Vue+Django项目中Axios请求时CSRF Token获取为null问题

先帮你拆解一下核心问题：调用getCookie('csrftoken')返回null，说明浏览器中还没有这个Cookie，或者Cookie无法被正确读取。结合你的代码和Django的CSRF机制，咱们一步步排查解决：

1. GET请求默认不会主动触发CSRF Cookie的设置 #

Django的CSRF Cookie通常是在用户第一次访问非API页面（比如Django Admin或普通HTML页面）时被设置的。如果你的Vue前端直接发GET请求到API端点，Django可能不会在这个响应中添加CSRF Cookie。

解决办法： #

• 临时测试方案：先在浏览器中访问Django的任意页面（比如http://localhost:8000/admin/），登录后再回到前端发起请求，此时浏览器已经有了csrftoken Cookie，再调用getCookie应该就能拿到值了。
• 代码层面永久解决：修改你的VehicleListCreateAPIView，在GET请求中主动触发CSRF Cookie的生成：

  from django.middleware.csrf import get_token
  
  class VehicleListCreateAPIView(ListCreateAPIView):
      # 保留你原有的序列化器、权限、查询集代码...
      
      def get(self, request, *args, **kwargs):
          response = super().get(request, *args, **kwargs)
          # 强制生成CSRF Token并设置到Cookie中
          get_token(request)
          return response
  

2. 跨域（CORS）导致Cookie无法传递 #

如果你的Vue前端（比如localhost:8080）和Django后端（localhost:8000）不在同一域名/端口下，浏览器的同源策略会阻止Cookie跨域传递，自然读不到csrftoken。

解决办法： #

第一步：配置Django的CORS允许携带Cookie

1. 安装django-cors-headers：

   pip install django-cors-headers
   

2. 在settings.py中添加配置：

   INSTALLED_APPS = [
       # ... 其他已安装的app
       'corsheaders',
   ]
   
   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware',  # 必须放在CommonMiddleware之前
       'django.middleware.common.CommonMiddleware',
       # ... 其他中间件
   ]
   
   # 允许你的前端域名访问
   CORS_ALLOWED_ORIGINS = [
       "http://localhost:8080",  # 替换成你的Vue实际端口
       "http://127.0.0.1:8080",
   ]
   
   # 允许跨域请求携带Cookie
   CORS_ALLOW_CREDENTIALS = True
   

第二步：配置Axios允许携带Cookie

在你的Vue请求中添加withCredentials: true：

import axios from 'axios';
import { csrftoken } from './path-to-your-cookie-utils';

axios.get('/api/vehicles/', {
    withCredentials: true  // 关键配置，允许携带Cookie
})
.then(res => {
    console.log(res.data);
    console.log('CSRF Token:', csrftoken);
})
.catch(err => console.error(err));

3. 验证getCookie函数是否正常工作 #

有时候问题出在Cookie读取函数上，你可以在浏览器控制台直接测试：

// 先打印所有Cookie，看看有没有csrftoken
console.log('当前浏览器Cookie:', document.cookie);

// 测试你的getCookie函数
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
console.log('通过函数获取的CSRF Token:', getCookie('csrftoken'));

如果document.cookie里有csrftoken但函数返回null，可以换成更简洁的版本：

function getCookie(name) {
    const match = document.cookie.match(new RegExp(`(^| )${name}=([^;]+)`));
    return match ? match[2] : null;
}

4. 检查Django的CSRF Cookie配置 #

确保settings.py中的CSRF相关配置没有限制Cookie的作用域：

# 默认是/，如果你的API在子路径下，比如/api/，要确保路径正确
CSRF_COOKIE_PATH = '/'

# 如果前端和后端在不同子域名，比如front.yourdomain.com和api.yourdomain.com，需要设置：
# CSRF_COOKIE_DOMAIN = '.yourdomain.com'  # 注意开头的点

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