如何解决Python Django与React前端交互时的跨域Cookie问题?

轻静同学_6202

轻静同学_6202

2026-08-25

386人浏览

原创

必须同时设置 session_cookie_samesite 和 csrf_cookie_samesite 为 'none',且两者均需配对 secure=true,否则浏览器底层拦截 cookie;根本原因是 django 默认 session_cookie_samesite='lax' 导致跨域不携带 sessionid,csrf_cookie_samesite 非 'none' 则 csrftoken 不下发,配合 cors_allow_credentials=true、中间件顺序正确及前端 withcredentials=true 才能生效。

如何解决python django与react前端交互时的跨域cookie问题?

必须同时设置 SESSION_COOKIE_SAMESITE 和 CSRF_COOKIE_SAMESITE 为 'None',且两者都得配对 SECURE=True,否则浏览器直接拒绝写入或发送 Cookie——这不是前端没发、也不是后端没设,是浏览器在底层就拦截了。

为什么登录后 request.user 总是 AnonymousUser

根本原因是 Django 默认的 SESSION_COOKIE_SAMESITE = 'Lax',跨域请求下浏览器不携带 sessionid Cookie。即使响应头里有 Set-Cookie,DevTools 的 Application → Cookies 标签页也看不到它,Network 面板里 Request Headers 更不会出现 Cookie 字段。

  • SESSION_COOKIE_SAMESITE 必须显式设为字符串 'None'(不是 Python 的 None)
  • SESSION_COOKIE_SECURE 必须为 True(生产环境强制 HTTPS;开发环境用 HTTP 时可临时设 False,但此时 SAMESITE 得回退到 'Lax')
  • SESSION_COOKIE_HTTPONLY = False(仅当你需要前端 JS 读取 sessionid 时才开,比如登出逻辑)
  • SESSION_COOKIE_PATH = '/'(确保覆盖所有 API 路径)

为什么 Axios 请求始终报 CSRF cookie not set

Django 的 CsrfViewMiddleware 自动管理 csrftoken Cookie,它不认你视图里手动调用的 response.set_cookie(..., samesite='None')。真正起作用的是全局配置 CSRF_COOKIE_SAMESITE。

React Component Auditor
React Component Auditor

审计 React 组件的性能、可访问性、Hook 正确性、属性设计和重渲染优化——识别 memo 优化点和状态管理方案

下载
  • CSRF_COOKIE_SAMESITE = 'None' 是硬性要求,缺它就永远收不到 csrftoken
  • CSRF_COOKIE_SECURE = True 必须同步开启——SameSite=None 在非 HTTPS 下会被现代浏览器静默丢弃
  • CSRF_COOKIE_HTTPONLY = False(因为前端需通过 document.cookie 或 getCookie() 提取 token,塞进 X-CSRFToken 请求头)
  • 搭配 @ensure_csrf_cookie 装饰器用于首次获取 token 的接口(如 /api/user/),否则可能首次请求就失败

CORS 配置里最容易漏掉的三个点

django-cors-headers 不是装上就完事,中间件顺序和凭证配置错一个,Cookie 就全废。

  • CORS_ALLOW_CREDENTIALS = True 必须设,且不能和通配符 CORS_ALLOW_ALL_ORIGINS = True 共存(浏览器会直接拒收 Cookie)
  • CORS_ALLOWED_ORIGINS 必须写全协议+域名+端口(如 ['https://your-react-app.com', 'http://localhost:3000']),CORS_ORIGIN_WHITELIST 已弃用
  • CorsMiddleware 必须放在 SessionMiddleware 和 CsrfViewMiddleware 之前——顺序错了,中间件根本拿不到 Cookie

前端 Axios 必须加 withCredentials 且清缓存验证

光后端配对没用,前端不主动声明“我要带 Cookie”,浏览器连发都不发。

  • axios.defaults.withCredentials = true(全局设)或单个请求加 { withCredentials: true }
  • 发 POST/PUT/DELETE 前,必须从 document.cookie 或响应头里拿到 csrftoken,并作为 X-CSRFToken 头发出
  • 改完配置后必须硬重载:Ctrl+Shift+R(Win/Linux)或 Cmd+Shift+R(macOS),否则旧 Cookie 和缓存策略还在生效
  • 验证是否生效:看 Network → 任一请求的 Response Headers 是否含 Set-Cookie: csrftoken=... 和 Set-Cookie: sessionid=...,再看下一请求的 Request Headers 是否有 Cookie 字段

最常被忽略的是 CSRF_TRUSTED_ORIGINS(Django 4.0+ 必填),它和 CORS_ALLOWED_ORIGINS 不是一回事:前者用于校验 Referer,后者控制 Access-Control-Allow-Origin,漏掉它会导致 CSRF 校验直接 403。

Python免费学习笔记(深入):立即使用
在学习笔记中,你将探索 Python 的核心概念和高级技巧!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2523

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5463

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6490

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6098

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

863

5

python打包成可执行文件
python打包成可执行文件

本专题为大家带来python打包成可执行文件相关的文章,大家可以免费的下载体验。

2023.07.20

1751

4

python能做什么
python能做什么

python能做的有:可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

2023.07.25

4544

7

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.31

1729

3

python教程
python教程

Python已成为一门网红语言,即使是在非编程开发者当中,也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章,大家可以免费体验学习。

2023.08.03

26757

23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 12.2万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习