Django与Vue联调及跨域解决指南

本文深入剖析了Django与Vue前后端分离开发中API联调的核心痛点——401认证失败与CSRF token缺失问题，直击跨域场景下Cookie作用域、CSRF防护机制、CORS策略及HTTPS代理配置等关键陷阱；通过清晰的前后端协同方案（如前端手动注入X-CSRFToken、后端合理配置SAMESITE/SECURE/SESSION_COOKIE_DOMAIN、精准启用CORS凭据支持），手把手教会开发者绕过静默失效的“黑盒”问题，真正实现安全、稳定、可调试的身份认证与数据交互。

Vue调用Django API时401或CSRF token missing怎么办

不是Django不认Vue发的请求，是默认启用了CSRF保护，而Vue（尤其用axios）默认不带X-CSRFToken头，也不读取csrftoken cookie。Django收到非GET/HEAD请求（比如POST登录、提交表单），直接拒绝。

实操建议：

• 前端在登录成功后，从响应头或单独接口（如/api/csrf-token/）拿到csrftoken值，存入内存（别存localStorage）
• 后续所有带body的请求（POST/PUT/PATCH/DELETE），必须手动加headers: {'X-CSRFToken': token}
• Django端确保settings.py里CSRF_COOKIE_HTTPONLY=False（否则JS读不到cookie），且CSRF_COOKIE_SAMESITE='Lax'或'None'（若跨域需'None'并配CSRF_COOKIE_SECURE=True）
• 如果完全不想碰CSRF（比如纯API场景），可对特定视图禁用：用@csrf_exempt装饰器，但仅限于已用JWT或Session认证的接口——别裸奔

Django REST Framework怎么返回Vue能直接用的用户登录态

Vue需要知道“当前谁登录了”“有没有权限”，但Django Session依赖cookie，跨域时浏览器默认不发凭据；JWT又得自己签发校验。最稳的路是让Django在登录成功后，把用户关键字段（id、username、is_staff等）塞进响应体，而不是只扔个sessionid。

实操建议：

• 用django.contrib.auth.login()完成认证后，立刻查request.user，序列化成字典返回，例如：{'user': {'id': user.id, 'username': user.username, 'is_authenticated': True}}
• 别依赖request.session.session_key返回给前端——它没意义，Session ID本就由浏览器自动管理
• 如果用JWT，推荐djangorestframework-simplejwt，但注意：它的AccessToken默认不包含用户字段，需自定义TokenObtainPairSerializer往payload里加user_id、username
• Vue收到响应后，把user对象存Vuex/Pinia，路由守卫靠它判断登录态，别反复调/api/user/

Vue开发服务器（localhost:8080）访问Django（localhost:8000）被CORS拦截

浏览器报错Access to fetch at 'http://localhost:8000/api/login/' from origin 'http://localhost:8080' has been blocked by CORS policy，本质是Django没声明允许这个源发起请求，连预检（OPTIONS）都过不去。

实操建议：

• 装django-cors-headers，在INSTALLED_APPS加'corsheaders'，中间件里插在CommonMiddleware之前
• 开发期直接放开：CORS_ALLOWED_ORIGINS = ['http://localhost:8080']（别写*，它不支持带credentials的请求）
• 必须配CORS_ALLOW_CREDENTIALS = True，否则axios设withCredentials: true会失败
• 如果Vue用file://协议打开（比如双击index.html），CORS无解——必须走本地服务器（serve或http-server）

生产环境Nginx反向代理后，Django的SESSION_COOKIE_DOMAIN和SECURE设置怎么配

Vue打包后放Nginx，Django也跑在Nginx下，但域名统一为app.example.com。此时若Django还按localhost设cookie域，或漏掉HTTPS相关开关，Session就断连、登录态秒丢。

实操建议：

• SESSION_COOKIE_DOMAIN = '.example.com'（开头带点，兼容子域名）；CSRF_COOKIE_DOMAIN同理
• 如果Nginx终止HTTPS，Django收的是HTTP请求，但实际是HTTPS进来——必须加SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
• SECURE_COOKIE = True和SESSION_COOKIE_SECURE = True必须开，否则浏览器不传cookie
• SECURE_REFERRER_POLICY = 'same-origin'，避免Referrer泄露敏感路径

跨域联调真正的麻烦不在代码，在cookie作用域和协议信任链上。一个配置项写错，整个身份验证就静默失效，Vue看起来一切正常，但Django日志里全是Forbidden (CSRF token missing)或Forbidden (Referer checking failed)——得盯住浏览器开发者工具的Application → Cookies和Network → Request Headers两栏才看得见问题。

本篇关于《Django与Vue联调及跨域解决指南》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！