React+Django跨域请求sessionid不一致问题求助

前端代码修正 #

你在请求头里添加的Access-Control-Allow-Credentials和withCredentials完全多余，这两个是后端响应头，不需要前端在请求时携带。正确的fetch代码只需保留credentials: 'include'即可：

const response = await fetch(url, {
    method: 'POST',
    mode: 'cors',
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json',
        // 移除多余的响应头字段
    },
    body: JSON.stringify(data)
})

Django配置调整 #

1. 统一前后端访问域名/IP #

浏览器会将localhost和127.0.0.1判定为不同源，直接导致cookie无法跨请求携带。你需要：

• 要么让前后端都用localhost访问：Django启动时指定python manage.py runserver localhost:8000，前端保持localhost:3000
• 要么都用127.0.0.1：前端改为127.0.0.1:3000，Django保持127.0.0.1:8000

2. 修正Cookie安全配置 #

SESSION_COOKIE_SECURE = True是核心问题之一：

• 该配置要求cookie仅通过HTTPS传输，但你当前用的是HTTP协议（localhost/127.0.0.1默认HTTP），浏览器会直接拒绝保存或发送这个cookie。
• 开发环境下直接将其设为False，生产环境配合HTTPS再改回True。

同时调整SESSION_COOKIE_SAMESITE与安全配置匹配：

• 当SESSION_COOKIE_SECURE = False时，设为'Lax'（默认值）即可；若需跨域保持'None'，必须确保前后端源完全统一。

修改后的Cookie配置：

SESSION_COOKIE_SECURE = False  # 开发环境必须设为False，HTTP协议下才能正常传递cookie
SESSION_COOKIE_SAMESITE = 'Lax'  # 跨域场景可保持'None'，但需确保前后端源一致
SESSION_COOKIE_DOMAIN = None  # 开发环境无需指定域名，让Django自动处理，或设为'.localhost'（注意前缀点）

3. 简化CORS配置 #

你当前的CORS_ALLOW_HEADERS包含多余字段，access-control-allow-credentials和withCredentials不属于前端请求头范畴，无需添加到允许列表。简化后的CORS配置：

CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # 与前端实际访问地址完全一致
]

# 保留默认允许的请求头即可，无需额外添加无关字段
CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

验证步骤 #

1. 重启Django服务，确保配置生效。
2. 打开浏览器开发者工具（F12），切换到Application标签，查看Cookies下的localhost（或127.0.0.1），确认sessionid cookie已被保存。
3. 发送两次请求，检查请求头的Cookie字段是否携带同一个sessionid，同时查看Django会话目录（SESSION_FILE_PATH），确认仅生成一个会话文件，而非每次请求新建。

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