Django 4.2+Next.js JWT认证中HttpOnly Cookie的CORS问题

问题描述 #

搭建Django 4.2后端与Next.js前端的JWT认证体系时，遇到CORS相关问题：后端已将JWT令牌以HttpOnly Cookie形式返回（网络请求响应头可见Set-Cookie），但Chrome开发者工具的Application/Storage栏中看不到该Cookie，前端也无法携带该Cookie发起后续请求。已知HttpOnly Cookie无法通过JavaScript直接访问，仅需调试时在工具中查看。

环境信息 #

• Django版本：4.2
• 前端框架：Next.js
• 后端请求工具：Axios
• 浏览器：Chrome

排查与修复步骤 #

1. 统一前后端域名，配置Cookie Domain #

localhost和127.0.0.1在浏览器中被视为不同Origin，会导致Cookie存储失败。需统一前后端访问域名，并在Django的settings.py中显式配置Cookie Domain：

# settings.py
SESSION_COOKIE_DOMAIN = 'localhost'
CSRF_COOKIE_DOMAIN = 'localhost'
# 若使用自定义JWT Cookie，设置domain参数
response.set_cookie(
    'jwt_token',
    value=token,
    httponly=True,
    secure=False,  # 本地HTTP环境设为False，生产HTTPS设为True
    samesite='Lax',
    domain='localhost',
    max_age=3600*24*7
)

同时确保前端访问地址（如http://localhost:3000）和Axios的baseURL（如http://localhost:8000）域名一致。

2. 修正Django CORS配置 #

现有配置中CORS_ALLOW_HEADERS添加set-cookie是多余的（set-cookie是响应头，无需添加到请求头白名单），调整后配置如下：

# settings.py
from corsheaders.defaults import default_headers

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]

CSRF_TRUSTED_ORIGINS = ["http://localhost:3000"]

CSRF_COOKIE_SAMESITE = 'Lax'
SESSION_COOKIE_SAMESITE = 'Lax'

3. 检查Cookie的Secure属性 #

本地开发使用HTTP协议时，Cookie的secure属性必须设为False，否则浏览器会拒绝存储该Cookie。生产环境使用HTTPS时再改为True。

4. 验证Chrome Cookie存储设置 #

• 打开Chrome开发者工具，在**Application > Cookies > 后端域名（如localhost:8000）**下查看Cookie，而非前端域名
• 关闭Chrome的"阻止第三方Cookie"功能（设置 > 隐私和安全 > Cookie和其他网站数据 > 允许所有Cookie）

5. 确认Axios请求配置 #

确保Axios实例正确配置withCredentials: true，且请求地址与后端域名匹配：

const axiosClient = axios.create({
  baseURL: 'http://localhost:8000',  // 与后端域名一致
  withCredentials: true
})

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