React/Next.js对接Oscar API认证问题求助（HttpOnly Cookie场景）

问题概述 #

项目采用Oscar API实现登录、注册及购物车功能，该API依赖HttpOnly Cookie完成认证。现在需要将其与React/Next.js集成，但HttpOnly Cookie无法被前端直接访问，导致认证环节受阻。目前已在React请求中设置withCredentials: true，Django配置如下：

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
SESSION_COOKIE_SAMESITE = None
CRSF_COOKIE_SAMESITE = None

核心解决步骤 #

1. 正确处理CSRF令牌 #

HttpOnly Cookie场景下，CSRF令牌需通过以下方式传递：

• 若后端提供HTML页面，可从页面的<meta name="csrf-token" content="...">标签中提取令牌值
• 自行实现一个Django接口（如/api/get-csrf-token/），返回CSRF令牌字符串
• 在所有POST/PUT/DELETE请求的请求头中添加X-CSRFToken: [令牌值]

2. 登录流程实现 #

• 向Oscar API的登录端点（如/api/login/）发送POST请求，携带用户名、密码参数，同时保持withCredentials: true
• 后端验证通过后，会自动在浏览器中设置HttpOnly Session Cookie，后续所有请求只要保留withCredentials: true，浏览器就会自动附带该Cookie，无需前端手动操作

3. 前端登录状态同步（可选） #

若需在前端展示用户登录状态：

• 新增Django接口（如/api/current-user/），返回当前登录用户的基础信息
• 登录成功后调用该接口，将用户信息存入React/Next.js的状态管理工具（如Context、Redux）
• 页面初始化时调用该接口，判断用户是否已登录

4. 开发环境配置调整 #

• 若使用Next.js，可在next.config.js中配置rewrites将API请求代理到Django后端，避免跨域问题
• 本地开发时，浏览器要求SameSite=None的Cookie必须为Secure，可临时设置SESSION_COOKIE_SECURE = False，生产环境务必设为True

验证方式 #

• 登录成功后，在浏览器开发者工具的「Application → Cookies」中确认Django Session Cookie已存在
• 检查后续请求的Request Headers是否包含Cookie字段，后端是否能正确识别用户身份

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