Django REST Framework登录接口Session Cookie无法在Vue浏览器端加载

核心原因 #

这是典型的跨域请求（CORS）下的Cookie存储问题。Vue应用运行在localhost:5173，Django后端在127.0.0.1:8000，浏览器会将这两个地址视为不同的源。即使后端生成了Session Cookie，浏览器会因为CORS配置缺失或域名不匹配而拒绝存储该Cookie。

具体修复步骤 #

1. 配置Django的CORS支持 #

首先需要安装并配置django-cors-headers来允许跨域携带凭证：

安装依赖

pip install django-cors-headers

修改Django配置文件settings.py

• 添加到INSTALLED_APPS：

INSTALLED_APPS = [
    # ... 其他应用
    'corsheaders',
]

• 添加中间件（注意顺序，必须放在CommonMiddleware之前）：

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... 其他中间件
]

• 启用凭证支持并允许Vue的源：

# 允许跨域携带凭证
CORS_ALLOW_CREDENTIALS = True

# 允许Vue应用的源
CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",
    "http://127.0.0.1:5173",
]

2. 统一Cookie域名 #

浏览器会根据Cookie的domain属性决定是否存储。由于Vue用localhost而Django用127.0.0.1，需要统一域名：

方案一：修改Django的Session Cookie域名

在settings.py中添加：

# 让Session Cookie对localhost生效
SESSION_COOKIE_DOMAIN = 'localhost'

方案二：将Vue运行在127.0.0.1

启动Vue时指定绑定地址：

npm run dev -- --host 127.0.0.1

这样Vue和Django都在127.0.0.1域名下，端口不同不影响Cookie存储。

3. 确认Axios配置正确性 #

你的Axios已经设置了withCredentials: true，这是正确的，但可以在请求中显式指定确保生效：

function login() {
    axios.post('http://127.0.0.1:8000/api/login/', {
        username: email.value,
        password: password.value,
    }, {
        withCredentials: true
    })
}

验证 #

完成上述配置后，重新启动Django和Vue应用，发起登录请求。此时浏览器应该会正确存储Session Cookie，后续请求也会自动携带该Cookie。

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