Nuxt.js请求未携带Cookie至Django服务器的问题排查求助

1. 修复Axios请求的参数错误 #

你的Axios调用参数顺序有误，axios.get的第二个参数才是配置对象，你把withCredentials: true放到了第三个参数位置，导致配置不生效。修改后的代码：

async getUserInfo() {
    try {
        const response = await axios.get('https://localhost:8000/api/userinfo/', {
            withCredentials: true // 移到第二个参数的配置对象里
        });
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
},

2. 调整Django中间件顺序 #

corsheaders.middleware.CorsMiddleware必须放在django.middleware.common.CommonMiddleware之前，否则CORS相关响应头无法正确生成。修改后的MIDDLEWARE配置：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 移到此处
    'django.middleware.common.CommonMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

3. 配置Simple JWT将Token存入Cookie #

默认情况下，rest_framework_simplejwt会把JWT Token返回在响应体中，而非设置为HttpOnly Cookie。你需要在Django settings中添加Simple JWT的Cookie配置，让认证接口成功后把Token写入Cookie：

SIMPLE_JWT = {
    'AUTH_COOKIE': 'access_token',  # Cookie名称
    'AUTH_COOKIE_DOMAIN': None,  # 本地开发留空，生产环境填对应域名
    'AUTH_COOKIE_SECURE': True,  # HTTPS环境必须开启
    'AUTH_COOKIE_HTTPONLY': True,  # 禁止前端JS访问，提升安全性
    'AUTH_COOKIE_SAMESITE': 'None',  # 跨域场景必须设为None
    'AUTH_COOKIE_PATH': '/',  # Cookie生效路径
}

配置后，可通过浏览器网络面板查看认证接口的Set-Cookie响应头，确认Cookie已被正确设置。

4. 处理自签名SSL证书的浏览器限制 #

本地开发使用自签名HTTPS证书时，部分浏览器会标记为"不安全"，进而阻止Cookie的存储和发送。解决方法：

• Chrome：开启chrome://flags/#allow-insecure-localhost选项，允许localhost使用不安全证书
• Firefox：访问Django服务时，点击地址栏的"不安全"提示，选择"添加例外"信任证书

5. 验证Cookie的响应头属性 #

在浏览器网络面板中，查看认证接口的Set-Cookie响应头，确认包含以下属性：

• Secure：对应SESSION_COOKIE_SECURE=True的设置
• SameSite=None：跨域场景的必要配置
• HttpOnly（如果是JWT Cookie）：防止XSS攻击

常见陷阱总结 #

• 不要忽略Axios的参数顺序，withCredentials必须放在请求配置对象中
• Django中间件顺序严格，CorsMiddleware必须靠前才能生效
• Simple JWT默认不使用Cookie存储Token，需手动配置
• 跨域Cookie必须同时满足SameSite=None和Secure两个条件
• 自签名证书会触发浏览器安全限制，需手动信任才能正常使用Cookie

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